Menu
$(".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.
513
The mouse leave event will be triggered whenever the mouse cursor leaves from the selected element and after the occurrence of the event, it implements a mouse leave event that has been attached to an event handler function to run.
The mouseover event triggers when the mouse pointer enters the div element, and its child elements. The mouseenter event is only triggered when the mouse pointer enters the div element.
If you depress the mouse button on an element and move your mouse off the element, and then release the mouse button. The only mousedown event fires on the element. Likewise, if you depress the mouse button, and move the mouse over the element, and release the mouse button, the only mouseup event fires on the element.
jQuery mouseleave() MethodThe mouseleave event occurs when the mouse pointer leaves the selected element. The mouseleave() method triggers the mouseleave event, or attaches a function to run when a mouseleave event occurs.
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.
90
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
