hover intent

apply delay for hover

HTML

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

</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

$('.slide').on('mouseeneter',function(){

$('.container').addClass("show");
}).on('mouseleave',function(){

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