A CodePen by Behrooz Tahanzadeh. 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 tr

index.html

<div class="both">
</div>
<div class="before-over">
</div>
<div class="before-out">
</div>

style.css

/* 1.Add delay before both mouseOver/Out events */
div.both
{
  -moz-transition: all 1s;
  -webkit-transition: all 1s;
  transition: all 1s;
  
  -moz-transition-delay: 0.5s;
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
}
div.both:hover{}

/* 2.Add delay just before mouseOver event */
div.before-over
{
  -moz-transition: all 1s;
  -webkit-transition: all 1s;
  transition: all 1s;
}
div.before-over:hover
{
  -moz-transition-delay: 0.5s;
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
}

/* 3.Add delay just before mouseOut event */
div.before-out
{
  -moz-transition: all 1s;
  -webkit-transition: all 1s;
  transition: all 1s;
  
  -moz-transition-delay: 0.5s;
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
}
div.before-out:hover
{
  -moz-transition-delay: 0s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

/*=========================*/
div
{
  /* properties */
  width:100px;
  height:50px;
  background-color:#77CC77;
  margin:5px;
}
div:hover
{
  /* New Properties */
  background-color:black;
  width:400px;
}