如何避免举办活动＆＃34; mouseout＆＃34;而另一个元素正在进入？

Question

我在悬停时为某些div创建自定义动画。像这样：

＆＃13;

＆＃13;

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

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

＆＃13;

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

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

.d2 {
  background-color: blue;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我遇到了麻烦：当mouseover框移动d2并且事件d1被捕获时，我丢失了活动mouseout：

我不想在移动mouseout时点击活动d2。此外，我想在out来自d1的光标mouseout时使用该事件。

我的问题：我可以忽略在移动d2时运行事件if(/entertainments/.test(window.location.href)||/suggestions/.test(window.location.href) ) 吗？谢谢！

Answer 1

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

＆＃13;

＆＃13;

$('.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');
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

正如评论中所提到的，如果d2元素上没有事件，这可以简化为只将CSS添加到.d2样式，而不更改JS。

＆＃13;

＆＃13;

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

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

＆＃13;

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

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试使用setTimeout函数确保d2完全移动

$('.d1').on('mouseover', function () {
    $('.d2').animate({ 'margin-top': '-100px' }, 500);
    setTimeout(function () {
        $('.d1').on('mouseout', function () { $(this).css('background-color', 'green'); })
    }, 500)
});

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