jQueryでホバーを書く方法

Hover は、jquery で一般的に使用されるインタラクティブ効果で、マウスがホバリングまたは離れると、対応するイベントをトリガーできます。 jqueryでホバーを記述する方法は次のとおりです。

1. 単一要素へのホバーの使用

jquery の hover() メソッドを使用して、マウス ホバーを追加し、単一要素のイベント ハンドラーを残すことができます。

$("element").hover(
    function(){
        $(this).addClass("hover");//添加hover类名
    },
    function(){
        $(this).removeClass("hover");//移除hover类名
    }
);

上記のコードでは、まず要素を選択し、次に hover() メソッドを使用してイベント ハンドラーを追加します。マウスが要素内に移動すると、最初の関数が実行され、要素にホバー クラス名が追加されます。マウスが要素の外に移動すると、2 番目の関数が実行され、要素からホバー クラス名が削除されます。 。

2. 複数の要素にホバーを使用する

複数の要素にホバー効果を実現する必要がある場合は、各要素を走査してから hover() を呼び出すことで実現できます。方法 。

$(".elements").each(function(){
    $(this).hover(
        function(){
            $(this).addClass("hover");//添加hover类名
        },
        function(){
            $(this).removeClass("hover");//移除hover类名
        }
    );
});

上記のコードでは、最初にすべての要素を選択し、次に each() メソッドを使用して各要素を走査し、次に hover() メソッドを呼び出してイベント ハンドラーを追加します。

3. ホバー省略メソッド

jquery は、ホバー効果を省略する便利なメソッドを提供します。 mouseenter() メソッドを使用して hover() メソッドの最初のパラメータを置き換えることができ、同様に、mouseleave() メソッドを使用して hover() メソッドの 2 番目のパラメータを置き換えることができます。

$("element").mouseenter(function(){
    $(this).addClass("hover");//添加hover类名
}).mouseleave(function(){
    $(this).removeClass("hover");//移除hover类名
});

上記のコードでは、mouseenter() メソッドを使用してマウス移動イン イベント ハンドラーを追加し、mouseleave() メソッドを使用してマウス移動アウト イベント ハンドラーを追加し、チェーン呼び出しを使用して簡素化しています。コード。

概要

ホバーは、jquery で一般的に使用されるインタラクティブ効果であり、マウスがホバーしたり離れたりしたときに、対応するイベントをトリガーできます。 jquery は、単一または複数の要素にホバー効果を簡単に追加できる hover() メソッドと省略メソッドを提供します。ホバーを使用するときは、パフォーマンスを向上させるためにイベントを複数回トリガーしないように注意する必要があります。

以上がjQueryでホバーを書く方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。