鼠标悬停/鼠标悬停 jquery答案

【问题标题】：mouseover/mouseout jquery鼠标悬停/鼠标悬停 jquery
【发布时间】：2011-08-04 22:46:48
【问题描述】：

我有一个鼠标悬停和鼠标悬停，我在鼠标悬停时隐藏/显示一些 div，然后在鼠标悬停时反转隐藏/显示。它可以工作，但是如果我快速将鼠标移到我正在移动的 div 上以显示 div，它将来回移动大约 3 次，显示和隐藏。我错过了什么？

$("TABLE.tbl-graphs DIV.util").mouseover(
    function(){
        $("DIV.pic-container, DIV.util-info").hide("slow");
        $("DIV.util-description").show("slow");
    });
$("TABLE.tbl-graphs DIV.util").mouseout(
    function(){
        $("DIV.pic-container, DIV.util-info").show("slow");
        $("DIV.util-description").hide("slow");
    });

【问题讨论】：

考虑使用hover() 或至少链接您的事件.mouseover().mouseout();，这样您就不会处理选择器两次。 Hmz 好像你可能想要hoverIntent

标签： jquery mouseover mouseout

【解决方案1】：

在调用.show() 或.hide() 之前使用.stop()。您可能还想使用mouseenter 和mouseleave - 区别在于事件冒泡。

试穿一下尺寸：

var $divs = $("div.pic-container, div.util-info, div.util-description");

$("table.tbl-graphs div.util").live('mouseenter mouseleave'
function() {
    $divs.stop().toggle("slow");
});

请注意，要显示/隐藏的<div>s 需要处于正确的初始状态才能正常工作。

【讨论】：

【解决方案2】：

我认为您正在寻找出队：http://api.jquery.com/dequeue/

这不允许排队事件（例如，将鼠标悬停在 div 上并使其淡入和淡出 3 次，仅一次）

【讨论】：

【解决方案3】：

解决这个问题的常用方法是使用一个简单的标志，因此如果它当前正在做某事，它会忽略鼠标请求，例如

if(flag) return;
flag = true

然后在你的函数中添加一个 flag = false 的回调

【讨论】：

【解决方案4】：

尝试使用 .stop(true, true) 来防止动画排队。 http://api.jquery.com/stop/

您可能还想查看 .hover(handlerIn, handlerOut)。 http://api.jquery.com/hover/#hover1

【讨论】：