:hover と複数の隣接兄弟セレクターが Safari と Chrome でバグを引き起こすのはなぜですか?

:hover と複数の隣接兄弟セレクターに関する Safari と Chrome のバグ

Web 開発では、:hover 疑似クラスと隣接を使用します。 -兄弟セレクターは、通常、Safari、Chrome、Opera、Firefox などの主要なブラウザーでサポートされています。たとえば、次のコードは意図したとおりに動作します:

a:hover + div {}

ただし、複数の隣接兄弟セレクターが追加されると、Webkit ブラウザー (Safari や Chrome を含む) は予期しない動作を示します:

div:hover + a + div {}

このような場合、Webkit は期待どおりにスタイルを適用できません。

このバグに対処する回避策は、body 要素でスタイル宣言を使用して微妙なアニメーション効果を作成することです:

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

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

このアニメーションには目に見える効果はありませんが、スタイルの再計算がトリガーされ、Webkit ブラウザが :hover および隣接兄弟セレクター スタイルを正しく適用できるようになります。

回避策を示す例は、http://jsfiddle です。 net/jalbertbowdenii/ds2yY/1/.

この手法を採用すると、Webkit のバグを克服し、異なるブラウザ間で一貫した動作を保証できます。

以上が:hover と複数の隣接兄弟セレクターが Safari と Chrome でバグを引き起こすのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。