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

【问题标题】：jQuery: trigger a hover event from another elementjQuery：从另一个元素触发悬停事件
【发布时间】：2012-10-30 19:15:55
【问题描述】：

当您将鼠标悬停在 <div> 上时，我希望页面的单独部分上的 <a> 也可以“悬停”在上面。

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

我试过这个 jQuery，但它不会触发 <a> 的悬停 CSS。

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

【问题讨论】：

doesn't trigger the <a>'s hover CSS. 可能是您的 css 中不够具体的问题

标签： javascript jquery html hover bind

【解决方案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/

【讨论】：

这是实现它的方法，假设我们正在讨论绑定处理程序，并假设所有.receiver 元素都应该被触发。在这里也可以使用 .hover()，但命名事件更好。
是的，.hover 也可以，但我也认为它的使用逻辑在仅使用一个参数时会令人困惑。
实际上 mouseenter 事件不会强制元素处于悬停状态，所以在我的情况下，这不会强制 css 规则 :hover 所以 css 不会受到影响，这就是我想要的去做。

【解决方案2】：

你可以做这样的事情-：

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

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

【讨论】：

.trigger('hover') 无效。

【解决方案3】：

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

这是一个简单的示例，当您将鼠标移到 div 上时，链接文本会变为粗体 - http://jsfiddle.net/Pharaon/h29bh/

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

【讨论】：

$(".receiver").toggleClass("hover", event.type === 'mouseenter'); 会更安全一些。

【解决方案4】：

hover() 是一个 jQuery 方法，将 mouseenter 和 mouseleave 事件联系在一起

试试

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

或者

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

但是，将类添加到 a 标记并添加新的 css 规则可能会得到更好的结果。

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

【讨论】：

您可以使用.trigger(event.type) 来对齐两种事件类型。