Question

http://wilwaldon.com/gift/index.html页面是问题。

这是html / jquery的pastebin：http://pastebin.com/L4HQBjBc

jQuery的Pastebin：http://pastebin.com/WmEUK7Ey

如果您将图标悬停在右侧的大型“立即激活”按钮（卫星天线，公文包，锁定）上方，则会出现一个div。

所需的操作是div在悬停时出现，并在悬停时消失。

发生的事情是，如果将鼠标悬停在弹出窗口的文本上，则div会消失。

提前致谢！

Answer 1

不使用与.hover()相同的.mouseout()的第二部分，而是将其删除，并将第二个函数更改为.mouseleave()。当鼠标移出od calloutpop时，鼠标的第二部分将被调用，当鼠标在其自己的div中移过文本时，它将执行该操作。使用.mouseleave()将在鼠标离开div时调用，而不是在鼠标悬停在其中的元素上时调用。

此外，在执行任何jQuery函数之前，您应该等待dom准备就绪，此时您只需等待.hide()弹出窗口：

jQuery(document).ready(function() {
    // hides the slickbox as soon as the DOM is ready
    jQuery('#calloutpop').hide();
    jQuery('#callout').hover(function() {
        jQuery('#calloutpop').fadeIn(500);
    });
    jQuery('#calloutpop').mouseleave(function(event) {
            jQuery(this).fadeOut(500);
    });
});

见working here

Answer 2

也许如果你没有处理程序输出功能做任何事情或只使用.mouseenter（）你的问题将得到解决。我认为发生的事情是，因为你出现的div掩盖了触发元素，所以只要鼠标击中不是触发器的东西（弹出的div的文本）就会触发mouseout

你已经有弹出窗口的鼠标，否则应该处理隐藏。

试试这个

jQuery('#callout').mouseenter(function() {
   jQuery('#calloutpop').fadeIn(500);
});

jQuery('#calloutpop').mouseout(function(event) {
   if (!$(event.relatedTarget).is('#callout')) {
      jQuery('#calloutpop').fadeOut(500);
   }
});

Answer 3

您正在向整个div注册悬停侦听器。你第一次将鼠标悬停在它上面就会打开。然后，如果用户越过其中一个包含的图标，则会在包含的图标上触发悬停事件。在Javascript事件中冒泡DOM（关键字：event propagation）。因此，悬停事件将传播到已注册悬停侦听器的父div。这将导致div隐藏。

您可以在只调用event.stopPropagation（）的图标上注册悬停侦听器，以停止传播，如下所示：

$('.icons_in_hover').hover(function(e){
  e.stopPropagation();
});

Answer 4

删除mouseout代码并将您的hover代码更改为：

jQuery('#callout').hover(
    function() {jQuery('#calloutpop').fadeIn(500)}
    ,
    function() {jQuery('#calloutpop').fadeOut(500)}
);

jquery在悬停时显示/隐藏。内容徘徊时隐藏

4 个答案: