эффект rollover mouseenter работает только после второй записи

Question

Я пытался найти похожие сообщения по этому конкретному вопросу с небольшим успехом, поэтому, надеюсь, кто-то более опытный с JQuery может пролить свет на мою проблему. В настоящее время я работаю над сайтом портфолио, то есть большим количеством изображений. Я хотел создать эффект опрокидывания JQuery, когда вы наведете над одним из миниатюр изображений, представленных на сайте.

Эффект сам достигнут, но в нем есть своего рода ошибка. Всякий раз, когда я обновляю страницу или просматриваю страницу заново, всякий раз, когда я нахожусь в элементе контейнера изображения, который должен запускать эффект JQuery, он не делает этого в первый раз, но когда я его пробую второй раз, не обновляя страницу , эффект есть.

Вот основной HTML разметки:

<section class="main"> 
    <div class="wrapper"> 
     <article class="ImageContainer"> 
      <a href="#"> 
       <img class="back" src="Images/Image1.jpg" alt="Image1"/> 
       <span class="over" style="display: none;"> 
        <h2>Title</h2> 
        <p>Watch Project</p> 
       </span> 
      </a> 
     </article> 
    </div> 
</section> 

Так как вы можете видеть, я решил свою «эффект одновременного нажатия клавиш» с «дисплей: нет» решение, которое я потом пусть мой Jquery код «FadeIn ", чтобы сделать его видимым на эффекте mouseenter.

Ниже приведено описание CSS для span class = "over", возможно, не обязательно для показа, а просто для инкассации.

.over { 
    width: 300px; 
    height: 300px; 
    background-image:url(Images/over.png); 
    position: absolute; 
    top: 0px; 
    left 0px; 
} 

А теперь мой JQuery

$(document).ready(function(){  
    $(".ImageContainer").mouseenter(function(){ 
     $(this).children('a').children('span').fadeIn(200); 
    }); 
    $(".ImageContainer").mouseleave(function(){ 
     $(this).children('a').children('span').fadeOut(200); 
    }); 
}); 

Кажется, проблема возникает только при просмотре в браузере, это jsfiddle, кажется, работает без проблем. Я не понимаю, почему. Все мои ссылки на мои другие документы также работают, и у меня есть jquery и jquery UI.

http://jsfiddle.net/LRdR9/

решение моей проблемы: мой класс Игнорирует Защиту Щитом не имеют «отображения: блок;» что заставило браузер не видеть его. Во втором центре мыши он автоматически помещает его туда. Он обманул меня, думая, что у меня другая проблема.

Answer 1

Все, кажется, работает в jsFiddle.

Обратите внимание, что в вашем jsFiddle вы используете свой код onload - убедитесь, что вы делаете это в своем файле (обязательно разместите свой jQuery внутри тела, а не голову). Кроме того, убедитесь, что вы тестируете его в нескольких браузерах.

P.s. Вы можете сократить свой код до следующего.

$(document).ready(function(){  
    $(document).on('mouseenter mouseleave', '.ImageContainer', function() { 
     $('a > span', this).fadeToggle(200); 
    }); 
}): 

Пример jsFiddle.