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

【问题标题】：Homemade jQuery Tooltip Script acting wonky自制的 jQuery 工具提示脚本表现不稳定
【发布时间】：2012-07-30 19:10:24
【问题描述】：

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

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

【问题讨论】：

仅供参考，即使它可以工作，在平板电脑上也不是很好，这些天要记住一些事情。
确实如此。 jQuery 动画在 iPad 上往往很糟糕。

标签： jquery

【解决方案1】：

我认为目的应该是将侦听器绑定到整个字段集，而不是分别绑定两个元素。

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

【讨论】：

好电话，消除了所有的紧张情绪。谢谢！

【解决方案2】：

我能够让它工作得更好一点。

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

【讨论】：

该示例不起作用，因为mousein() 不是函数。此外，当您将鼠标悬停在 div 上时，它不会保留。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

使用 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

【讨论】：

很好的电话，很好地使用了fadeToggle()，没见过。 Jomikr 的回答更有效地解决了这个问题，但你的回答教了我stop() 参数和fadeToggle()，所以谢谢！