jquery show/hide on hover。内容隐藏时隐藏

http://wilwaldon.com/gift/index.html是页面问题。jquery show/hide on hover。内容隐藏时隐藏

这里的HTML/jQuery的的引擎收录：http://pastebin.com/L4HQBjBc

引擎收录的jQuery：http://pastebin.com/WmEUK7Ey

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

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

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

在此先感谢！

来源

2011-03-24 wilwaldon

而不是使用的.hover()第二部分是相同的作为.mouseout()离开它并将第二个功能更改为.mouseleave()。当鼠标移出calloutpop时，悬停的第二部分将被调用，当鼠标移过文本时，鼠标将移动到它自己的div中。使用.mouseleave()将在鼠标离开div时调用，而不是在它悬停在其中的元素上时调用。

此外，你应该等待DOM是做任何jQuery函数之前做好准备，在你只等着.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

来源

2011-03-24 18:29:24 Scoobler

工作完美，非常感谢。 – wilwaldon 2011-03-24 18:43:16

没问题，很高兴帮助！ – Scoobler 2011-03-24 18:53:19

有趣。所有这四个答案都有一个投票。这个有两个upvotes（得分为1），另外三个有upvote来反击downvote。我想知道为什么。（对于那些不知道的人，[拥有1000名声望的用户可以看到最后得分而不是最后得票数]） – 2011-03-25 18:04:31

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

您弹出的鼠标已经到位，否则应该照顾隐藏。

试试这个

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

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

来源

2011-03-24 18:15:14 jdcook72

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

你可以只是调用event.stopPropagation（）的图标注册悬停监听器停止这样的传播：

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

来源

2011-03-24 18:18:09 BernardMarx

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

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

来源

2011-03-24 18:33:04 Neil

jquery show/hide on hover。内容隐藏时隐藏

回答

相关问题