jQuery: mouseout not triggering if mouse is moved out too fast?

Question

$(".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).

How can I fix this?

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

Answer 1

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

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.