Подтвердить что ты не робот

JQuery: mouseout не запускается, если мышь вышла слишком быстро?

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

Первая кнопка скрывается и показывает вторую кнопку в том же месте. Все хорошо.

Однако, если я быстро перейду к mouseover и mouseexit первой, вторая кнопка останется активной (событие mouseout, связанное со второй кнопкой, не будет запущено).

Как я могу это исправить?

Изменить: здесь jsfiddle http://jsfiddle.net/aArub/. Спасибо заранее.

Ответ 1

Ну, я вижу пару возможных проблем.

Первая проблема, которую я вижу, заключается в том, что 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/

Ответ 2

Существует очень простой способ сделать это без использования javascript. Просто CSS. Конечно, если вы хотите просто сделать элемент видимым или нет.

Пример HTML:

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

CSS

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

Это помогает избежать ситуации, когда mouseleave или mouseout не запускаются.