Javascript jQuery：从另一个元素触发悬停事件

当您将鼠标悬停在一个

上时，我希望页面的一个单独部分上的

也被“悬停”在上面

---

你可以这样做-：

$(".initiator").hover(function(){
   $(".receiver").addClass('hover');
   console.log("div was hovered");
}, function(){
   $(".receiver").removeClass('hover');
});

现在您可以拥有一个保存css规则的类。

hover（）

是一个jQuery方法，它将

mouseenter

和

mouseleave

事件联系在一起

试一试

或

但是，将类添加到

a

标记并添加新的css规则可能会获得更好的结果

 $(this).find('.receiver').toggleClass('hoverClass')

不确定“hover”是什么意思，但假设您为

定义了一些CSS。receiver:hover

伪类，我建议将它们移动到单独的CSS类

。hover

并使用jQuery

toggleClass

函数

下面是一个快速示例，当您将鼠标移到div上时，它会使链接文本变为粗体-

试试这个：

$('.initiator').on('mouseenter mouseleave', function(e) {
    $('.receiver').trigger(e.type);
})

它将为接收器应用与启动器为mouseenter和mouseleave接收相同的触发器。请注意：

.hover(over, out) 

只是以下内容的高级变体：

.on('mouseenter', over).on('mouseleave', out)

因此，在绑定和触发鼠标事件时，使用这些信息可以更加精确

如评论中所述，您还可以使用：

$('.initiator').hover(function(e) {
    $('.receiver').trigger(e.type);
})

---

这里还有很多内容需要阅读：

.trigger（'hover'）

无效。

不会触发的悬停CSS。

可能是CSS中的一个问题，不够具体。

$（“.receiver”）.toggleClass（“hover”，event.type=='mouseenter'）

会更安全一些。您可以执行

.trigger（event.type）

来对齐两种事件类型。假设我们讨论的是绑定处理程序，并且假设所有

。receiver

元素都应该被触发，那么这就是实现方法。在这里使用

.hover（）

也可以，但在我看来命名事件更好。是的，

.hover

也可以，但我也认为它的使用逻辑在仅使用一个参数时会令人困惑。实际上

mouseenter

事件不会强制元素处于悬停状态，所以在我的例子中，这并不强制css规则

：hover

，所以css不会受到影响，这就是我想要它做的。

$(".initiator").hover(function(){
  $(".receiver").toggleClass("hover");
  console.log("div was hovered");
});​

$('.initiator').on('mouseenter mouseleave', function(e) {
    $('.receiver').trigger(e.type);
})

.hover(over, out) 

.on('mouseenter', over).on('mouseleave', out)

$('.initiator').hover(function(e) {
    $('.receiver').trigger(e.type);
})