Question

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

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

但是，如果我快速移动并鼠标退出第一个按钮，第二个按钮将保持活动状态（不会触发与第二个按钮相关的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上，则会在Name Price上触发鼠标悬停/鼠标中心，但您不会在Login之上{1}}。如果此时离开，则永远不会触发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/

jQuery：如果鼠标移出太快，mouseout不会触发？

2 个答案: