1

我正在尝试创建一个函数，当您将鼠标悬停在缩略图上时，该函数将在缩略图上添加叠加层，并在您离开时移除叠加层。这是我的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”，这会移除叠加层，并且它会不断循环闪烁。

有一个简单的解决方案吗？

4

3 回答 3

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>
于 2009-02-13T22:42:28.867 回答
1

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

$('#galleryPanel .overlay').live('mouseout', function(event){
    $(this).remove();
    return false;
});
于 2009-02-13T22:59:31.853 回答
0

这可能听起来有点 hacky，但您可以使用变量（在 dom 元素的情况下，我会使用 css 类）来了解这是否是事件第一次在此元素上触发。

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

于 2009-02-13T17:35:50.897 回答