Faking Hover Intent with JavaScript

CSS drop downs seem to be a logical choice. The advantages are plenty and the implementation simple.

Css driven drop-downs rely on modifying the visibility/display of items with the :hover CSS pseudo-class.

Here is a nice demo: CSS3 Dropdown Menu.

Unfortunately with the simplicity of just two states (hover, non-hover) you loose the ability to add fancy transitions.

A particular problem with css 3 drop downs is that the visibility of the dropdown is applied immediately on mouse over. This is a nuisance for users as their mouse might just be passing by.

A nice plugin introduced the concept of hover Intent, which addresses this problem.

One of my colleagues put together a nice example of a css 3 implemented hover Intent. Css transitions are really powerful, however until they are widely supported we have no choice but to turn JavaScript.

Below is a simple script that progressively enhances a css driven navigation.

comments powered by Disqus


Under Construction

About Me

Martin here. I'm a developer by choice. Focused in SharePoint & JavaScript.

  • Follow me on Twitter