jQuery CSSでホバーを削除する方法

CSS の :hover 疑似クラスは、マウス ポインターが要素の上に置かれたときのスタイルを定義します。これは Web 開発でよく使用される状況です。ただし、ホバー スタイルを削除する必要がある状況もあります。現時点では、jQuery を使用して :hove 効果を削除できます。

方法1:removeClass()を使用する
jQueryのremoveClass()メソッドを使用して:hover疑似クラススタイルコードを削除するのが最も簡単な方法です。その構文は次のとおりです。

$("selector").removeClass("className");

このメソッドは、クラス名を持つ任意の要素に適用できます。例:

$("a").removeClass("hover");

このメソッドは、すべての a 要素から hover という名前のスタイルを削除できます。

方法 2: Mouseleave イベントを使用する
jQuery の Mouseleave イベントを使用すると、:hover 疑似クラス効果を削除することもできます。マウスが指定された要素から離れたときにカスタム アクションを実行します。 Mouseleave イベントは、mouseenter イベントに対応します。

その構文は次のとおりです:

$("selector").mouseleave(function(){
// 関連する指定されたスタイル コードを削除します
});

例:

$("a").mouseleave(function(){
$(this).css("background-color","white");
} );

この例では、マウスがリンクから離れたときにリンクの背景色を白に設定します。

方法 3: Mouseout イベントを使用する
jQuery の Mouseout イベントを使用しても同じ効果が得られ、要素のマウスがそこから離れると、特定の操作が実行されます。

その構文は次のとおりです。

$("selector").mouseout(function(){
// 関連する指定されたスタイル コードを削除します
});

例:

$("a").mouseout(function(){
$(this).css("background-color","white");
} ) ;

これは、マウスが要素から離れたときに両方とも対応する操作を実行するため、上記の Mousemove イベントと同じです。

まとめ
実際の開発では、開発者は実際の状況に応じて、hover 疑似クラスの影響を除去するためのさまざまな方法を選択する必要があります。上記 3 つの方法は実際の開発で最もよく使用される方法であり、より良い結果を得ることができます。

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