jQuery的：从另一元件触发悬停事件(jQuery: trigger a hover event

当你将鼠标悬停在一个<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和鼠标离开它将应用相同的触发器用于接收器。 注意：

.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:

不知道你的意思是“徘徊”，但假设你有一个定义了一些CSS .receiver:hover伪类我建议将其移动到不同的CSS类.hover和使用jQuery toggleClass功能。

下面是一个简单的例子，让链接文字加粗，当您移动鼠标移到股利- http://jsfiddle.net/Pharaon/h29bh/

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

Answer 4:

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

尝试

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

要么

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

然而，你将可能有更好的结果添加类的a标签，并加入新的CSS规则。

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

文章来源: jQuery: trigger a hover event from another element