JavaScript を使用して CSS :hover 効果を無効にするにはどうすればよいですか?-CSSチュートリアル-php.cn

JavaScript を使用して CSS :hover 効果を無効にするにはどうすればよいですか?

Mary-Kate Olsen

リリース： 2024-12-03 04:17:15

オリジナル

702 人が閲覧しました

How Can I Disable CSS :hover Effects Using JavaScript?

JavaScript で CSS :hover 効果を無効にする

Web 開発では、ユーザーが要素の上にマウスを移動すると、CSS の「:hover」効果によって要素に視覚的な変化が追加されます。ただし、このデフォルトの動作を無効にし、JavaScript を使用してカスタム効果を実装したい場合があります。

問題:

Web 開発者は、次の問題に遭遇しました。ブラウザが CSS で定義された「:hover」効果を適用できないようにしたいと考えていました。彼らは JavaScript を使用してよりスムーズなホバーアニメーションを作成することを目的としていましたが、既存の CSS スタイルを上書きするという課題に直面しました。

試みられた解決策:

開発者は jQuery hover( ) 関数を使用してデフォルトの動作を防止しましたが、期待した動作は得られませんでした。 result.

答え:

JavaScript を使用して「:hover」効果を直接無効にすることはできません。スタイル設定に関しては、CSS が JavaScript よりも優先されます。ただし、同様の効果を達成する別のアプローチもあります。

回避策の 1 つは、HTML、CSS、JavaScript を組み合わせて使用することです:

HTML:

次のようにして body 要素を「nojQuery」クラスでマークします。 default.

<body class="nojQuery">

ログイン後にコピー

CSS:

CSS の ":hover" スタイルを、"nojQuery" クラスが存在する場合にのみ適用するように制限します。

body.nojQuery ul#mainFilter a:hover {
    /* CSS-only hover styles here */
}

ログイン後にコピー

JavaScript:

次第jQuery ライブラリをロードするには、body 要素から「nojQuery」クラスを削除し、CSS ホバースタイルを効果的に有効にします。

$(function() {
    $('body').removeClass('nojQuery');
});

ログイン後にコピー

この回避策を実装すると、ブラウザは JavaScript がロードされた後にのみ CSS ホバースタイルを適用します。「nojQuery」クラスは削除されます。この方法では、JavaScript が使用できない場合でも、カスタム JavaScript 効果を使用して、元の CSS ホバー動作を維持しながら、よりスムーズなホバーアニメーションを作成できます。

以上がJavaScript を使用して CSS :hover 効果を無効にするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。