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

Question

当你悬停在一个 <div> 上时，我希望页面上另一个独立部分的 <a> 也会被“悬停” 。

<div class="initiator">
</div>
<div>
   <a class="receiver href="#">Touch the div and I get hovered!</a>
</div>

我尝试了这个 jQuery，但它无法触发标签的hover CSS。

我尝试了这个jQuery，但它无法触发标签的hover CSS。

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

- Don P

---

很可能是你的CSS存在问题，不够具体，导致无法触发<a>标签的悬停CSS效果。 - charlietfl

Answer 1

试试这个:

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

这里还有更多内容可阅读：http://api.jquery.com/hover/

- David Hellsing

---

假设我们正在谈论绑定处理程序，并且假设所有.receiver元素都应该被触发，那么这就是实现它的方法。在这里使用.hover()也可以，但是命名事件更好，我个人认为。 - I Hate Lazy

是的，.hover 也可以使用，但我认为当只使用一个参数时，它的使用逻辑很令人困惑。 - David Hellsing

实际上，mouseenter事件不会强制元素处于悬停状态，所以在我的情况下，这不会强制CSS规则:hover，因此CSS不会受到影响，这正是我想要的。 - Haritsinh Gohil

Answer 2

您可以这样做：

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

现在您可以拥有一个包含CSS规则的类。

- Andreas

---

.trigger('hover') 不是有效的。 - I Hate Lazy

Answer 3

不确定您所说的“hovered”是什么意思，但假设您已经为.receiver:hover伪类定义了一些CSS，我建议将它们移动到单独的CSS类.hover中，并使用jQuery的toggleClass函数。

这里有一个快速示例，当您将鼠标移动到div上时使链接文本加粗 - http://jsfiddle.net/Pharaon/h29bh/

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

- Sergey Rybalkin

---

$(".receiver").toggleClass("hover", event.type === 'mouseenter'); 这样写会更安全一些。 - I Hate Lazy

Answer 4

hover() 是一个 jQuery 方法，将 mouseenter 和 mouseleave 事件绑定在一起。

尝试一下

$(this).find('.receiver').mouseenter()

或者

 $(this).find('.receiver').trigger('mouseenter')

然而，如果您将类添加到标记并添加新的CSS规则，则可能会获得更好的结果。

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

- charlietfl

---

你可以使用.trigger(event.type)来使两个事件类型相对应。 - I Hate Lazy