jquery 在悬停时显示/隐藏。内容悬停时隐藏答案

【问题标题】：jquery show/hide on hover. Hiding when contents hoveredjquery 在悬停时显示/隐藏。内容悬停时隐藏
【发布时间】：2011-03-24 17:47:25
【问题描述】：

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

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

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

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

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

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

提前致谢！

【问题讨论】：

标签： jquery jquery-ui jquery-selectors

【解决方案1】：

不要使用与.mouseout() 相同的.hover() 的第二部分，将其省略，并将第二个函数更改为.mouseleave()。鼠标移出 odcalloutpop 后，将立即调用悬停的第二部分，当鼠标移过文本时，它将在其自己的 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

【讨论】：

有趣。所有这四个答案都有一个反对票。这个有两个赞成票（得分为 1），另外三个有一个赞成票来抵消反对票。我想知道为什么。（不知道的朋友users with 1000 reputation can see number of down and up votes instead of just the final score）
@George Bailey 有人评论说，为什么其他问题之一昨天被否决了。当有人在没有理由的情况下对答案投反对票时，我感到非常沮丧。如果答案没有用或不是答案，我理解需要投反对票 - 但恕我直言，人们应该留下他们投票的理由 - 特别是当答案是真实的并被接受为答案时.....跨度>
我同意。事实上，我是那个问为什么对前两个答案投反对票的人，但是当我发现对所有四个答案都投反对票时，我删除了那些认为它们没用的 cmets，然后发布了我上面更新的评论.

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

也许如果您没有处理程序输出功能做任何事情或只使用 .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);
   }
});

【讨论】：

【解决方案4】：

摆脱mouseout 代码并将您的hover 代码更改为：

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

【讨论】：