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規則的類。

Answer 3

不確定你的意思是“hovered”，但假設你為.receiver:hover定義了一些CSS .receiver:hover偽類我建議將它們移動到單獨的CSS類.hover並使用jQuery toggleClass函數。

這是一個快速示例，當您將鼠標移到div上時，鏈接文本變為粗體 - http://jsfiddle.net/Pharaon/h29bh/

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

Answer 4

hover()是一個將mouseenter和mouseleave事件聯系在一起的jQuery方法

嘗試

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

要么

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

然而，你將可能有更好的結果添加類的a標簽，並加入新的CSS規則。

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