JavaScript で CSS :hover 効果を無効にするにはどうすればよいですか?
Dec 03, 2024 pm 08:12 PM
JavaScript を使用した CSS :hover 効果の無効化
CSS スタイルを維持しながら、JavaScript を使用してよりスムーズなホバー効果を実現するのは難しい場合があります。これを克服する方法は次のとおりです:
問題の説明:
JavaScript が使用可能な場合、ブラウザーが CSS :hover 効果を特定の要素に適用しないようにします。
解決策:
:hover 状態を無効にする純粋な JavaScript メカニズムはありません。ただし、回避策としては、クラスを使用して CSS と JavaScript でホバー効果を制御する必要があります。
HTML:
「nojQuery」クラスを <body> に追加します。
CSS:
「nojQuery」クラスが <body> に存在する場合にのみ適用されるように :hover スタイルを制限します。 element.
JavaScript:
JavaScript が読み込まれるときに、<body> から「nojQuery」クラスを削除します。
例:
<body class="nojQuery">
body.nojQuery ul#mainFilter a:hover {
/* CSS-only hover styles here */
}$(function() {
$('body').removeClass('nojQuery');
});このアプローチにより、JavaScript を使用せずに CSS ホバー効果をオーバーライドできます。個々のプロパティを明示的にリセットする必要があります。
以上がJavaScript で CSS :hover 効果を無効にするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
人気の記事
人気の記事
ホットな記事タグ
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7283
9
1622
14
1342
46
1259
25
1205
29
Smart Forms Frameworkを使用してJavaScript連絡フォームを作成する
Mar 07, 2025 am 11:33 AM
Smart Forms Frameworkを使用してJavaScript連絡フォームを作成する
5つの最高のPHPフォームビルダー（および3つの無料スクリプト）を比較する
Mar 04, 2025 am 10:22 AM
5つの最高のPHPフォームビルダー（および3つの無料スクリプト）を比較する
node.jsとexpressのMulterを使用してファイルアップロードします
Mar 02, 2025 am 09:15 AM
node.jsとexpressのMulterを使用してファイルアップロードします
