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

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

The first button hides itself and shows the second button in the same place. All good.

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

However, if I quickly mousover and mouseexit the first button, the second button will stay active (the mouseout event related to the second button won't be triggered).

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

How can I fix this?

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

Edit: here's the jsfiddle http://jsfiddle.net/aArub/ . Thanks in advance.

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

2 个解决方案

#1

Well, I see a couple of possible issues.

好吧,我看到了几个可能的问题。

The first issue I see is that Login is a shorter element than Name Price. This means that if you hover over the end of Name Price, like on the e for instance, you trigger mouseover/mouseenter on Name Price, but you don't end up on top of Login. If you move away at this point, you will never trigger a mouseout/mouseleave event.

我看到的第一个问题是Login是比Name Price更短的元素。这意味着如果您将鼠标悬停在名称价格的末尾,例如在e上,则会在名称价格上触发鼠标悬停/鼠标中心,但您最终不会登录。如果此时离开,则永远不会触发mouseout / mouseleave事件。

Secondly, when you move through the button quickly, there is some tiny delay for the javascript to respond (we are in real life after all, computers do take some time to process information). This means that when you enter the button, it will begin to hide np-button and show login-button. When you move quickly, the mouse leaves np-button before it disappears and before login-button appears. In this case, you trigger a mouseleave event on np-button rather than leaving from login-button, on which there is no event handler.

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

If you attach both events to both buttons, you will notice the problem disappears, or at least it seems to from my end.

如果你将这两个事件都附加到两个按钮上,你会发现问题消失了,或者至少从我的角度来看。

With .on() this is written like this:

使用.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();
});

Demo: http://jsfiddle.net/jtbowden/sAQFN/

#2

There is very simple way to do this without using javascript. Just CSS. Of course if you want just make element visible or not.

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

Example HTML:

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

CSS:

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

It helps to avoid situation, when mouseleave or mouseout are not triggered.

当没有触发mouseleave或mouseout时,它有助于避免出现这种情况。

#1