jQuery:如果鼠标移出太快,mouseout不会触发？

Question

$(".np-button").mouseover(function() { 
    $(this).hide();
    $(this).next().show();
});
$(".login-button").mouseout(function() {
    $(this).hide();
    $(this).prev().show();
});

第一个按钮隐藏自身并在同一位置显示第二个按钮.都好.

但是,如果我快速mousover和mouseexit第一个按钮,第二个按钮将保持活动状态(不会触发与第二个按钮相关的mouseout事件).

我怎样才能解决这个问题？

编辑:这是jsfiddle http://jsfiddle.net/aArub/.提前致谢.

Answer 1

没有使用javascript,有一种非常简单的方法可以做到这一点.只是CSS.当然,如果你想让make元素可见或不可见.

示例HTML:

<div class="visible">
    <div class="hidden">Some text</div>
</div>

CSS:

.hidden{
    display: none;
}
.visible:hover .hidden{
    display: block;
}

当有mouseleave或mouseout没有触发时,它有助于避免情况.

Answer 2

嗯，我看到了几个可能的问题。

我看到的第一个问题是，这Login是一个比 更短的元素Name Price。这意味着，如果您将鼠标悬停在 的末尾Name Price（例如，例如在 上）e，则会触发 上的 mouseover/mouseenter Name Price，但最终不会到达 的顶部Login。如果您此时离开，则永远不会触发 mouseout/mouseleave 事件。

其次，当你快速移动按钮时，JavaScript 的响应会有一些微小的延迟（毕竟我们在现实生活中，计算机确实需要一些时间来处理信息）。这意味着当您输入该按钮时，它将开始隐藏np-button和显示login-button。当您快速移动时，鼠标会np-button在消失和login-button出现之前离开。mouseleave在这种情况下，您将在 上 触发事件，np-button而不是从 离开login-button，因为该事件上没有事件处理程序。

如果将这两个事件附加到两个按钮，您会发现问题消失了，或者至少从我这边看来是这样。

.on()这样写就可以了：

$("body").on('mouseenter', '.np-button, .login-button', function() {
    $('.np-button').hide();
    $('.login-button').show();
}).on('mouseleave', '.np-button, .login-button', function() {
    $('.np-button').show();
    $('.login-button').hide();
});

演示： http: //jsfiddle.net/jtbowden/sAQFN/