ホームページ > ウェブフロントエンド > CSSチュートリアル > :hover および隣接兄弟セレクター Webkit のバグを解決するにはどうすればよいですか?

:hover および隣接兄弟セレクター Webkit のバグを解決するにはどうすればよいですか?

DDD
リリース: 2024-10-24 00:06:29
オリジナル
674 人が閲覧しました

How to Resolve the :hover and Adjacent-Sibling Selectors Webkit Bug?

:hover および隣接兄弟セレクターによる Webkit のバグの理解と解決

Webkit ブラウザー (Chrome、Safari など) のバグこの問題は、複数の隣接兄弟セレクターと一緒に :hover 擬似クラスを使用するときに発生します。具体的には、3 番目の隣接兄弟が導入されると、ホバー効果が期待どおりに適用されません。

例:

a:hover + div {}
ログイン後にコピー

このコードは問題なく動作します。ただし、別の隣接兄弟セレクターを追加すると、

div:hover + a + div {}
ログイン後にコピー

Webkit ブラウザーで意図した動作が壊れます。

興味深いことに、最初にアンカー要素にカーソルを合わせ、次に div 要素にカーソルを合わせると、スタイルが正しく適用されています。さらに、隣接する ~ 兄弟セレクターを含めると、スタイルが宣言されていない場合でも問題が解決されます:

div:hover ~ div {}
ログイン後にコピー

このバグに対処するには、body 要素でアニメーションをシミュレートすることで回避策を実装できます:

body { -webkit-animation: bugfix infinite 1s; }

@-webkit-keyframes bugfix { 
  from { padding: 0; } 
  to { padding: 0; } 
}
ログイン後にコピー

ボディ上で空のアニメーションをトリガーすることで、バグを効果的に回避できます。この JSFiddle でソリューションを確認できます: http://jsfiddle.net/jalbertbowdenii/ds2yY/1/

以上が:hover および隣接兄弟セレクター Webkit のバグを解決するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート