How to stop toggle event from being fired multiple times on mouseenter/mouseleave?

Question

I\'m using jQuery to toggle the visibility of a

using the jQuery toggle method. The toggle is fired on the mouseenter and mouseleave event, thus cre

Answer 1

You can use the more common mouseover/mouseout events to get a hover event that doesn't fire on internal mouse movements.

But don't use toggle on a mouse event, it can easily go wrong if eg. the mouse is over the element at page load time, or the mouse leaves the browser (which can allow the mouse to leave the bounds of the element without firing a mouseout). Have separate function for over which shows the content, and out which hides it.

Better: just use the hover() method which is meant for exactly this purpose.