CSS Hover Intents

Hover intents were the fuzz word for a little while some time ago. The basic idea is that you should not fire a hover event handler as soon as the event happens, because the user may not actually intent to hover over the element, but he might just be rolling the mouse over in order to get somewhere else.

The javascript implementation was simple, involving some king of timer. Someone even created a hover intent jquery plugin. But to me it seems excessive to use Javascript to manage hover intents, specially now that most of our animations are handled by CSS.

A few weeks ago I was thinking about implementing hover intents in CSS. I’m not sure if anybody has come with this patter before, but I had never seen it until I came up with it. The idea is the same as in javascript, but you can implement it in pure CSS.

The “trick” is to take advantage of the transition property of CSS elements. After all, we usually want to do hover intent on animations and transitions, like when we are sliding down a menu, or adding some hover state to an element.

The code is simple:


.selector {
transition: .5s .3s linear;
}

Here we are specifying a transition that should take .5 seconds to complete, but should start with a .3 seconds delay. This effectively creates the hover intent effect.

Look at this demo to see it in action:
http://codepen.io/anon/pen/itvKm

Notice that I made the delay 1 second just to make it more obvious. This has been tested on Google Chrome and Firefox. You can even specify a different delay for the mouse enter, and mouse leave events by re-defining the transition property on the :hover rule with different values.