hover intent

apply delay for hover

by ramesh valasa

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div class="slide">
slide
</div>
<div class="container">
  container
  
</div>

CSS

.container {
  height: 400px;
  width: 100px;
  background-color: red;
      display: none;
}
.slide {
  height: 400px;
  width: 30px;
  background-color: green;
      display: inline-block;
}
.show{
      display: inline-block;
}

JavaScript

var timeoutHandle = null;

$('.slide').on('mouseenter',function(){
console.log("time out no")

timeoutHandle = setTimeout(function () {
   
   $('.container').addClass("show");
   console.log("time out")
}, 300);

}).on('mouseleave',function(){

$('.container').removeClass("show");
 clearTimeout(timeoutHandle);
});