Question

我有 2 个元素：initiator 和 receptor。

在鼠标输入或悬停 initiator 时，我希望 receptor 处于活动状态，并且仅当我在 receptor 内移动鼠标时才保持活动状态。如果我将鼠标移到 initiator 和 receptor 之外，我希望 receptor 处于非活动状态。

这是我尝试过的，但不是我想要的结果。

$(function () {
    var initiator = $("#initiator");
  var receptor = $(".receptor");

  initiator.on("mouseenter", function () {
    receptor.addClass('active');
  });
  
  receptor.on("mouseleave", function () {
    receptor.removeClass('active');
  }); 
});

#initiator {
  display: block;
  width: 50px;
  height: 50px;
  background: red;
  border-radius: 50%;
}

.receptor {
  width: 50px;
  height: 50px;
  background: green;
  display: none;
}

.active {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="initiator"> </div>
<div class="receptor"> </div>

Answer 1

你的代码就快到了。您需要进行的更改是 mouseenter 和 mouseleave 事件需要同时绑定到 initiator 和 receptor。试试这个：

jQuery($ => {
  var $initiator = $("#initiator");
  var $receptor = $(".receptor");

  $initiator.add($receptor).on({
    mouseenter: () => $receptor.addClass('active'),
    mouseleave: () => $receptor.removeClass('active')
  });
});

#initiator {
  display: block;
  width: 50px;
  height: 50px;
  background: red;
  border-radius: 50%;
}

.receptor {
  width: 50px;
  height: 50px;
  background: green;
  display: none;
}

.active {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="initiator"> </div>
<div class="receptor"> </div>

另一种稍微更可靠的方法是将 initiator 和 receptor 都包装在父容器中，并仅将 mouseenter 和 mouseleave 事件附加到该容器中.这样您就可以避免在元素之间缓慢移动鼠标或元素之间存在间隙时会触发 mousenter 事件的任何问题。

jQuery 悬停 2 个元素

1 个答案: