javascript - 注入(inject)子元素时触发 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;
});

问题是，当创建覆盖时，鼠标已经在它上面，这会触发容器的“鼠标移出”，这会删除覆盖，并且它会不断循环闪烁。

有没有简单的解决方案？

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>