Question

嗨大家我有这个小小的Jquery脚本：link text

$(document).ready(function() 
{
      $('#image p').hide();

      $('img').hover(function()
      {
            $('#image p').show(200); 
      }, function()
      {
            $('#image p').hide(200); 
      });
});

我的工作正常，但我希望能够将鼠标悬停在图片中的文字上，每次尝试时，它都会保持“弹跳”

非常感谢任何帮助，谢谢，基思

Answer 1

好问题。

问题似乎是当鼠标悬停在段落上时，鼠标不再位于图像上方。所以段落是隐藏的。当段落被隐藏时，鼠标再次位于图像上方，因此再次显示该段落。等等...

一个好的解决方案是使用mouseenter和mouseleave事件而不是mouseover和mouseout：

$(document).ready(function(){
    $('#image p').hide();

    $('#image').bind("mouseenter", (function(){
        $('#image p').show(200)
     }));

    $('#image').bind("mouseleave", (function(){
        $('#image p').hide(200)
     }));

});

mouseenter / mouseleave 事件与 mouseover / mouseout 事件之间的主要区别在于前者不会冒泡。

在此示例中，div＃image的子段仍然接收mouseenter / mouseleave事件（即使您没有监听它们），但事件不会冒泡到其父元素。请参阅this page之前的扩展讨论。

您还必须不再将事件分配给img标记，而是分配给包含div。这应该不是问题。

Jquery - 如何修复此图像翻转？

1 个答案: