在 jQuery 中使用 mouseover 和 mouseout，没有给出预期的输出答案

【问题标题】：Using mouseover and mouseout in jQuery, not giving expected output在 jQuery 中使用 mouseover 和 mouseout，没有给出预期的输出
【发布时间】：2017-10-04 20:39:45
【问题描述】：

我有 2 个 div 元素，我在第一个 div 元素的鼠标悬停时打开第二个 div 元素，甚至在鼠标悬停时关闭它。代码如下。

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>

问题是当光标悬停在元素上时，如果光标移动一点点，它就会执行 mouseover 和 mouseout 事件。

Here is fiddle

【问题讨论】：

另外，推荐使用mouseenter和mouseleave事件。

标签： javascript jquery html

【解决方案1】：

您可以使用pointer-events: none;

.something1 {
  pointer-events: none;
}

【讨论】：

@SandeepPujare 如果您接受答案，请记住标记为已接受，以便其他人知道这是一个很好的答案；

【解决方案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>

【讨论】：