create hoverintent effect
using transition-delay

I always use hoverintent plugin for jQuery in order to prevent accidental firing of a function (it can be an animation or AJAX request). hoverintent add an delay before triggering of mouseover or mouseout events.

But recently I used combination of :hover pseudo class and CSS transition instead of using JavaScript mouseOver/Out event in many cases.

I found using CSS transition-delay property as a good way to create similar hoverintent effect.

Following examples demonstrates how it works in different situations:

1.Add delay before both mouseOver/Out events

[btcode title=”CSS” lang=”css”]
div
{
/* Properties */
transition: all 0s;
transition-delay: 1s;
}
div:hover
{
/* New Properties */
}
[/btcode]

2.Add delay just before mouseOver event

[btcode title=”CSS” lang=”css”]
div
{
/* Properties */
transition: all 0s;
}
div:hover
{
/* New Properties */
transition-delay: 1s;
}
[/btcode]

3.Add delay just before mouseOut event

[btcode title=”CSS” lang=”css”]
div
{
/* Properties */
transition: all 0s;
transition-delay: 1s;
}
div:hover
{
/* New Properties */
transition-delay: 0s;
}
[/btcode]

I dont use prefixes in these examples to make code more cleaner.

See the Pen create hoverintent effect using transition-delay by Behrooz Tahanzadeh (@behrooz-tahanzadeh) on CodePen.