jquery - 如何避免在另一个元素移入时运行事件 "mouseout"？

Question

我正在为一些悬停时的 div 创建自定义动画。像这样:

$('.d1').on('mouseover', function () {
  $('.d2').animate({ 'margin-top': '-100px' }, 500);
});

$('.d1').on('mouseout', function () {
  $(this).css('background-color', 'green');
});

.d1, .d2 {
  width: 50px;
  height: 50px;
  background-size: 50px 50px;
}

.d1 {
  background-color: red;
  margin-top: 50px;
}

.d2 {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="d1"></div>
<div class="d2"></div>

我遇到了麻烦:当框 d2 穿过 d1 和事件 时，我丢失了事件 mouseover mouseout 被捕获:

我不想在移动 d2 时触发 mouseout 事件。另外，我想在光标确实从 d1 中 out 时使用该事件。

我的问题:我可以在移动 d2 时忽略运行 mouseout 事件吗？谢谢!

Answer 1

如果我正确理解你的问题，你可以使用CSS声明pointer-events: none;来阻止d2“阻止”鼠标悬停 d1

$('.d1').on('mouseover', function() {
  $('.d2').addClass("noEvents").animate({
    'margin-top': '-100px'
  }, 500, function() {
    $('.d2').removeClass("noEvents");
  });
});

$('.d1').on('mouseout', function() {
  $(this).css('background-color', 'green');
});

.d1,
.d2 {
  width: 50px;
  height: 50px;
  background-size: 50px 50px;
}

.d1 {
  background-color: red;
  margin-top: 50px;
}

.d2 {
  background-color: blue;
}

.noEvents {
  pointer-events: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="d1"></div>
<div class="d2"></div>

正如评论中提到的，如果 d2 元素上没有事件，则可以简化为仅将 CSS 添加到 .d2 样式，而无需JS 发生变化。

$('.d1').on('mouseover', function() {
  $('.d2').animate({
    'margin-top': '-100px'
  }, 500);
});

$('.d1').on('mouseout', function() {
  $(this).css('background-color', 'green');
});

.d1,
.d2 {
  width: 50px;
  height: 50px;
  background-size: 50px 50px;
}

.d1 {
  background-color: red;
  margin-top: 50px;
}

.d2 {
  background-color: blue;
  pointer-events: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="d1"></div>
<div class="d2"></div>