jQueryでmouseoverとmouseoutを使用して、期待される出力を与えない

Question

私はdiv要素を2つ持っています.1番目のdiv要素のmouseoverで2番目のdiv要素を開いていて、mouseoutで閉じています。以下のコードを入力します。

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>

要素にカーソルを合わせると、カーソルが少しでも移動される場合に問題があり、それはマウスオーバーとマウスアウトイベントを実行します。

Here is fiddle

Answer 1

あなたはあなたがマウスを使って対話している場合、それは同じイベントを処理し続けるだろう、なぜならmouseoverイベントが発生したpointer-events: none;

.something1 { 
    pointer-events: none; 
} 

Answer 2

使用することができます。 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>