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

当您将鼠标悬停在一个 <div> 上时，我希望页面的单独部分上的 <a> 也可以悬停"在其上.

<div class="initiator"></div>
<a class="receiver href="#">触摸 div 我会悬停！</a></div>

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

$(".initiator").hover(function(){$(".receiver").hover();console.log("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);})

这里还有很多内容要阅读:http://api.jquery.com/hover/

When you hover over one <div>, I want an <a> on a separate part of the page to be "hovered" on also.

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

I've tried this jQuery, but it doesn't trigger the <a>'s hover CSS.

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

解决方案

Try this:

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

It will apply the same triggers for the receiver as the initiator receives for both mouseenter and mouseleave. Note that:

.hover(over, out) 

is just a high-level variant of:

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

so using that information you can be more precise when binding and triggering mouse events.

As noted in the comment, you can also use:

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

There are lots more to read here: http://api.jquery.com/hover/