在jQuery中使用MouseOver和Mouseout，而不是提供预期的输出

Question

我有2个div元素，我在第1个div元素的鼠标上打开第二个div元素，甚至在鼠标out上将其关闭。代码如下。

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>

问题是，如果光标被移动了一点，则悬停在元素上时，它会执行鼠标和鼠标之路事件。

这是小提琴

Answer 1

您可以使用pointer-events: none;

.something1 {
  pointer-events: none;
}

Answer 2

它是由于mouseover事件而发生的，如果您使用鼠标进行交互，它将继续处理相同的事件。

这就是为什么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>