:hover と複数の隣接兄弟セレクターによる Webkit のバグを解決する方法

:hover および複数の隣接兄弟セレクターに関する Webkit のバグ

Safari や Chrome などのブラウザでは、:hover 疑似クラスが機能しますa:hover div などの隣接兄弟セレクターを使用すると正しく動作します。ただし、div:hover a div のように、複数の隣接兄弟セレクターが使用されるとバグが発生します。

問題

Webkit ブラウザでは、div:hover a div セレクターが誤動作し、失敗しました。

にスタイルを適用します。期待通りの要素。逆説的ですが、スタイルの有無にかかわらず、兄弟コンビネータ (div:hover ~ div など) を追加すると、不可解にも問題が解決されました。

解決策

この Webkit のバグを回避するには、以下の手法を使用できます。 body要素のアニメーション。アニメーション化された CSS クラスを空のアニメーションで body 要素にアタッチすると、ブラウザを効果的に騙してバグを解決させることができます。

<code class="css">body {
  -webkit-animation: bugfix infinite 1s;
}

@-webkit-keyframes bugfix {
  from {
    padding: 0;
  }
  to {
    padding: 0;
  }
}</code>

この解決策は、ページの再レンダリングをトリガーすることで機能します。兄弟セレクターを正しく解決するための Webkit。この回避策の実際の例は、JS Fiddle: http://jsfiddle.net/jalbertbowdenii/ds2yY/1/ で確認できます。

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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。