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.