Question

我有2个div元素，我在第一个div元素上打开第二个div元素，鼠标悬停，然后在mouseout上关闭它。代码如下。

＆＃13;

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

＆＃13;

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

＆＃13;

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

Here is fiddle

Answer 1

您可以使用pointer-events: none;

.something1 {
  pointer-events: none;
}

Answer 2

这是因为mouseover事件，如果您使用鼠标进行交互，它将继续处理相同的事件。

这就是pointer-events

的原因

＆＃13;

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

＆＃13;

.something1 {
  pointer-events: none;
}

＆＃13;

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

＆＃13;

在jQuery中使用mouseover和mouseout，而不是给出预期的输出

2 个答案: