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>

Answer 2

而不是将mouseout绑定到“.thumb”，尝试将其绑定到“.overlay”。

$('#galleryPanel .overlay').live('mouseout', function(event){
    $(this).remove();
    return false;
});

Answer 3

这可能听起来有点hacky，但你可以使用一个变量（在dom元素的情况下，我会使用一个css类）来知道这是否是第一次在该元素上触发事件。< / p>

基本上，你的函数在dom元素上查找这个css类的存在，但是在你创建它时它默认不存在。如果不存在，请添加该类并退出该函数。如果它在那里，命中是有效的，你应该执行你的叠加功能。因为你可以在dom元素上有多个类，所以这不应该与用于样式的任何其他类冲突。我会说使用类而不是自定义属性，因为自定义属性会使您的html“无效”以搜索抓取工具。

注入子元素时jQuery mouseout触发

3 个答案: