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

: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 サイトの他の関連記事を参照してください。