javascript - hover、onmouseetner、onmouseleave 関数を css クラスに追加、Syntax

Question

基本的な構文に問題があります。jquery を使用して CSS クラスのすべての要素を選択し、ユーザーがアイテムにカーソルを合わせたときにアクションを追加したい

$(".item").hover(function(){$(this).fadeTo(100, .1)});

onmouseenter と onmouseleave に異なる機能を割り当てることは可能ですか? 同様のコードを見つけるのに少し苦労しています。

Answer 1

では.hover()、2 つの関数を渡すことができます。

$(".item").hover(
    function(){$(this).fadeTo(100, .1)},
    function(){$(this).fadeTo(100, 1)}
);

これらはmouseenterおよびmouseleaveイベントとして割り当てられます。

---

もちろん手動でもできます。

$(".item").mouseenter(function(){$(this).fadeTo(100, .1)})
          .mouseleave(function(){$(this).fadeTo(100, 1)});

---

または、同じ関数を再利用して、イベント オブジェクトをテストすることもできます。

$(".item").hover(function(event){
    $(this).fadeTo(100, event.type === 'mouseenter' ? .1 : 1);
});

Answer 2

はい、可能です。

$(".item").hover( function(){ /* onmouseenter */ }, function(){/* onmouseleave */} );

Answer 3

hover1 つまたは 2 つのイベント ハンドラーを取ることができます。（あなたの例のように）1つが提供されている場合、それはイベントmouseenterとmouseleaveイベントの両方に適用されます。2 つ指定すると、各イベントが独自のハンドラーを取得します。

詳細については、ドキュメントを参照してください。

あなたの例の外観から、要素を on に戻したいと思いますmouseleave。もしそうなら、これを試してください:

$(".item").hover(
    function(){ $(this).fadeTo(100, .1) },
    function(){ $(this).fadeTo(100, 1)} ); 
);