web-dev-qa-db-ja.com

jQuery：別の要素からホバーイベントをトリガーする

1つの<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");
});
javascriptjqueryhtmlhoverbind
26
Don P

これを試して：

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

44
David Hellsing

次のようなことができます：

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

これで、CSSルールを保持するクラスを作成できます。

6
Andreas

「ホバリング」の意味がわかりませんが、.receiver:hover疑似クラス別のCSSクラスに移動することをお勧めします.hoverおよびjQuery toggleClass関数を使用します。

Div上にマウスを移動すると、リンクテキストが太字になる簡単な例を次に示します- http://jsfiddle.net/Pharaon/h29bh/

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

hover()は、mouseenterおよびmouseleaveイベントを結び付けるjQueryメソッドです

試してみる

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

または

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

ただし、aタグにクラスを追加し、新しいcssルールを追加すると、はるかに優れた結果が得られる可能性があります。

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