WebKit が複数の隣接する兄弟要素に :hover スタイルを適用できないのはなぜですか?

WebKit の問題: 複数の隣接兄弟セレクターを持つ Hover 擬似クラス

Web ブラウザーでは、通常、次の :hover 擬似クラスを処理するという問題が発生します。隣接兄弟セレクターと組み合わせて使用​​します。特に、WebKit (Safari および Chrome) は、一連の隣接する兄弟要素に :hover スタイルを適用するときに問題に直面します。

課題:

次の例は、この問題を示しています。 :

div:hover + a + div { /* styles here */ }

この場合、マウスを直接 2 番目の div 上に移動すると、WebKit は 2 番目の div にスタイルを適用できません。ただし、マウスを最初に先行するアンカー要素の上に置き、次に 2 番目の div の上に置くと、スタイルは期待どおりに適用されます。

解決策:

このバグには、body 要素のアニメーションの偽装が含まれます:

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

@-webkit-keyframes bugfix {
  from { padding: 0; }
  to { padding: 0; }
}

この解決策は、WebKit に body 要素の再レンダリングを強制する簡単なアニメーションを導入し、ホバー疑似クラスと複数の隣接兄弟の問題を解決します。セレクター。

以上がWebKit が複数の隣接する兄弟要素に :hover スタイルを適用できないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。