31

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");
});
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クラスに移動し、.hoverjQuerytoggleClass関数を使用することをお勧めします。

これは、マウスを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を結び付けるjQueryメソッドですmouseleave

試す

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

または

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

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

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