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

Question

当你将鼠标悬停在一个上面时<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");
});

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/

Answer 2

你可以这样做 - :

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

现在你可以拥有一个包含css规则的类.