自制jQuery工具提示脚本表现不稳定

Question

这是我的脚本：http://jsfiddle.net/w3kXj/2/

正如您所看到的，我正在尝试使用复选框输入在悬停时显示.terms-of-use div。但是，div的行为是非常不可预测的。有时它在悬停时根本不显示，特别是当你从下面鼠标悬停时。到底他妈发生了什么？有人可以帮忙吗？

Answer 1

使用stop（true，true）.stop()来解决div一直消失的问题，但它仍然有点奇怪。

$(function(){
// email results page tooltip hover
    $('.terms-of-use').hide();
    $('.agree-statement, .terms-of-use').hover(function(){
        $('.terms-of-use').stop(true,true).fadeToggle(); 
    });   
});​

http://jsfiddle.net/w3kXj/5/

我建议使用此插件hoverintent

Answer 2

通过聆听悬停并将鼠标悬停在工具提示触发器和工具提示本身上，您将引入许多可能的问题。解决方案如下：

• 仅在mouseenter
上收听.agree-statement
• 在mouseleave和.agree-statement
上收听.terms-of-use
• 如果toElement不是工具提示本身，则在mouseleave处理程序中仅隐藏。

Answer 3

我认为目的应该是将侦听器绑定到整个fieldset而不是两个元素。

http://jsfiddle.net/jomikr/w3kXj/10/

Answer 4

我能够让它更好一点。

http://jsfiddle.net/w3kXj/9/