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规则的类。

Answer 3

不确定“hovered”是什么意思，但假设您为.receiver:hover伪类定义了一些CSS，我建议将它们移到单独的CSS类.hover并使用jQuery {{1功能。

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

toggleClass

Answer 4

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

试

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

或者

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

但是，如果在a标记中添加一个类并添加新的css规则，您可能会有更好的结果。

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

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

4 个答案: