31

当您将鼠标悬停在 one上<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");
});
4

4 回答 4

45

尝试这个：

$('.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/

于 2012-11-10T20:09:55.447 回答
6

您可以执行以下操作：

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

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

于 2012-11-10T19:57:01.653 回答
1

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

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

$(".initiator").hover(function(){
  $(".receiver").toggleClass("hover");
  console.log("div was hovered");
});​
于 2012-11-10T20:01:01.030 回答
0

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

尝试

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

或者

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

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

 $(this).find('.receiver').toggleClass('hoverClass')
于 2012-11-10T19:59:26.470 回答