Web page elements that appear or disappear on hover should almost always do so with a slight delay. Why?
- To prevent distracting elements leaping out at you while your mouse is simply traversing the page.
- To prevent you from accidentally clicking something that popped into view just as you were moving your cursor towards the target.
- To prevent elements such as menus from unexpectedly disappearing when you just stray a pixel off, forcing you to re-invoke them.
So I was very happy to discover Brian Cherne’s hoverIntent jQuery plugin, a lightweight (4KB unminified) script which makes this effortless to do:
HoverIntent is similar to jQuery’s hover. However, instead of calling onMouseOver and onMouseOut functions immediately, this plugin tracks the user’s mouse onMouseOver and waits until it slows down before calling the onMouseOver function… and it will only call the onMouseOut function after an onMouseOver is called.
Please consider using it on your next project!