jQuery：触发另一个元素的悬停事件 [英] jQuery: trigger a hover event from another element

问题描述

当您将鼠标悬停在一个< div> 时，我想在单独的部分上放置< a> b
$ b

 < div class =initiator> 
< / div> 
< div> 
< a class =receiver href =＃>触摸div，我就会徘徊！< / a> 
< / div> 
  

我试过这个jQuery，但它不会触发< a> （）。$ h $ {
$ b $ $ $ $' （）;
}）;
b $ b

解决方案

试试这个：

$ p $ $（' （'.interface'）。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/

这篇关于jQuery：触发另一个元素的悬停事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！