Verwendung von mouseover und mouseout in jQuery, keine erwartete Ausgabe

Question

Ich habe 2 div Elemente ich öffne 2. div Element auf 1. div Element Mouseover sogar und schließen es auf Mouseout. Code wie folgt.

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>

Das Problem ist, wenn sie über Element schwebt, wenn der Cursor sogar ein wenig bewegt wird, führt er Mouseover- und mouseout Ereignisse.

Here is fiddle

Answer 1

können Sie pointer-events: none;

.something1 { 
    pointer-events: none; 
} 

Answer 2

wegen mouseover Ereignis kommt es vor, verwenden, wenn Sie mit der Maus interagieren mit ihm über den Umgang mit der gleichen Veranstaltung halten wird.

, deshalb, 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>