jQuery悬停2个元素

Question

我有两个元素：initiator和receptor。

在鼠标进入或悬停initiator时，我希望receptor处于活动状态，并且只有在receptor内部移动鼠标时才保持活动状态。如果我将鼠标移动到CCD_ 6&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事件的任何问题。