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

div
    {
        /* Properties */
        transition: all 0s;
        transition-delay: 1s;
    }
    div:hover
    {
        /* New Properties */
    }

2.Add delay just before mouseOver event

div
    {
        /* Properties */
        transition: all 0s;
    }
    div:hover
    {
        /* New Properties */
        transition-delay: 1s;
    }

3.Add delay just before mouseOut event

div
    {
        /* Properties */
        transition: all 0s;
        transition-delay: 1s;
    }
    div:hover
    {
        /* New Properties */
        transition-delay: 0s;
    }

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.