js中的悬停功能溢出

Question

我已经设置了我的页面，以便当用户将鼠标悬停在图像上时，会显示文本和一些气泡。有11个鱼的图像，每个都有自己的文字和泡泡。我确保包含鱼的div中没有​​重叠，但是当一个人在一个特定图像上盘旋时，其他一些图像的文本也会显示出来。这太令人分心，因为用户希望一次看到一个文本。我该如何解决这个问题？以下是该页面的链接：http://arabic001.com/colors

Answer 1

我很好奇自己对这个问题的常见解决方案是什么。 当我遇到这种情况时，我使用hoverIntent插件来获取jquery。

如果您选择此路线，则会将每个.mouseOver(),.mouseOut()更改为以下内容：

来自

          $('#fishBlue').mouseover(function() {     
                $('#bubblesBlue').toggle('slow');
                $('#textBlue').toggle('slow');
            });

            $('#fishBlue').mouseout(function() {                
                $('#bubblesBlue').hide('slow');
                $('#textBlue').toggle('slow');
            });

到此

$('#fishBlue').hoverIntent(function() {
                $('#bubblesBlue').toggle('slow');
                $('#textBlue').toggle('slow');
            });
}, function() {
                $('#bubblesBlue').hide('slow');
                $('#textBlue').toggle('slow')
});

注释

hoverIntent插件至少需要jquery 1.5.1

其他提示

我会抽出更多东西，为什么要为每条鱼改写相同的东西。

也许使用类

$('.fish').hoverIntent(function() {
                $(this).next('.bubble').toggle('slow');
                $(this).next('.text').toggle('slow');
            });
}, function() {
                $(this).next('.bubble').hide('slow');
                $(this).next('.text').toggle('slow')
});