ホームページ > 記事 > ウェブフロントエンド > jQueryでホバーを書く方法
Hover は、jquery で一般的に使用されるインタラクティブ効果で、マウスがホバリングまたは離れると、対応するイベントをトリガーできます。 jqueryでホバーを記述する方法は次のとおりです。
jquery の hover() メソッドを使用して、マウス ホバーを追加し、単一要素のイベント ハンドラーを残すことができます。
$("element").hover( function(){ $(this).addClass("hover");//添加hover类名 }, function(){ $(this).removeClass("hover");//移除hover类名 } );
上記のコードでは、まず要素を選択し、次に hover() メソッドを使用してイベント ハンドラーを追加します。マウスが要素内に移動すると、最初の関数が実行され、要素にホバー クラス名が追加されます。マウスが要素の外に移動すると、2 番目の関数が実行され、要素からホバー クラス名が削除されます。 。
複数の要素にホバー効果を実現する必要がある場合は、各要素を走査してから hover() を呼び出すことで実現できます。方法 。
$(".elements").each(function(){ $(this).hover( function(){ $(this).addClass("hover");//添加hover类名 }, function(){ $(this).removeClass("hover");//移除hover类名 } ); });
上記のコードでは、最初にすべての要素を選択し、次に each() メソッドを使用して各要素を走査し、次に hover() メソッドを呼び出してイベント ハンドラーを追加します。
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 サイトの他の関連記事を参照してください。