Using mouseover and mouseout in jQuery, not giving expected output

Question

I have 2 div elements i am opening 2nd div element on 1st div element's mouseover even and closing it on mouseout. code as follow.

 jQuery('.something').on('mouseover', function() { jQuery(jQuery(this).next('div')).slideDown(); }) jQuery('.something').on('mouseout', function() { jQuery(jQuery(this).next('div')).slideUp(); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="something" style="background:red; height:200px; width:200px"> </div> <div class="something1" style="background:#000; height:200px; width:200px; position:absolute; top: 0; display: none;"> </div> 

The problem is when hovering over element if the cursor is moved even a little bit, it executes mouseover and mouseout events.

Here is fiddle

Answer 1

You can use pointer-events: none;

.something1 {
  pointer-events: none;
}

Answer 2

It happens because of mouseover event, if you interact using mouse it will keep on handling the same event.

That's why pointer-events

 jQuery('.something').on('mouseover', function() { jQuery(jQuery(this).next('div')).slideDown(); }) jQuery('.something').on('mouseout', function() { jQuery(jQuery(this).next('div')).slideUp(); }) 

 .something1 { pointer-events: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="something" style="background:red; height:200px; width:200px"> </div> <div class="something1" style="background:#000; height:200px; width:200px; position:absolute; top: 0; display: none;"> </div>