jQuery mouseout стрельба при инъекции дочернего элемента

Question

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

<div class="thumb"><img src="i/testThumb.gif" /></div> 

А вот мой JQuery ...

$('.thumb').live('mouseover', function(event){ 
    if($(this).find('.overlay').length == 0){ 
     $(this).prepend('<div class="overlay"></div>'); 
    } 
    return false; 
}); 
$('#galleryPanel .thumb').live('mouseout', function(event){ 
    $(this).find('.overlay').remove(); 
    return false; 
}); 

Проблема заключается в том, что при создании наложения мышь уже над ней, и что вызывает «MouseOut "контейнера, который удаляет оверлей, и он непрерывно и непрерывно мигает.

Есть ли в этом легкое решение?

Answer 1

Я положил еще один div в микс, я думаю, вы можете найти то, что ищете.

<style> 
.hover { display:none;} 
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 

    $(".image").hover(
    function(over) { 
    $(this).find(".hover").animate({opacity: "show", top: "55"}, "slow"); 
    }, 
    function(out) { 
    $(this).find(".hover").animate({opacity: "hide", top: "55"}, "slow"); 
    }); 

}); 
</script> 

<div class='image'> 
    <div class='imageClass'> 
     <img src='img1.jpg' /> 

     <div class='hover'> 
      <img src='img1.jpg' /> 
     </div> 

    </div> 
</div> 

Answer 2

Это может показаться немного взломанным, но вы можете использовать переменную (в случае элемента dom, я бы использовал класс css), чтобы узнать, является ли это первым событием, запускающим этот элемент.

В принципе, ваша функция ищет присутствие этого класса css в элементе dom, но его нет по умолчанию при его создании. Если его нет, добавьте класс и выйдите из функции. Если он есть, это будет действительным, и вы должны выполнить свои функции оверлея. Поскольку вы можете иметь несколько классов в элементе dom, это не должно вызывать конфликтов с другими классами, используемыми для стилизации. Я бы сказал, что пойти с классом вместо пользовательского атрибута, потому что пользовательские атрибуты делают ваш html «недействительным» для поиска сканеров.

Answer 3

Вместо того, чтобы привязывать мышь к «.thumb», пытаясь привязать его к «.overlay».