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

ソース：php

前の記事：CSS セレクター エンジンは左から右に読み取るのか、それとも右から左に読み取るのか? 次の記事：z-index で Div の重複問題を修正するにはどうすればよいですか?

このウェブサイトの声明

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

著者別の最新記事

• MySQL クエリ実行のためにカラム名を動的に連結できますか?
  2024-10-24 04:43:30
• Chrome の #screenQuery で Border-Radius が機能しないのはなぜですか?
  2024-10-24 04:42:02
• Python を使用してディレクトリ内の複数のファイルの名前を変更する方法
  2024-10-24 04:41:30
• C# で MySQL UTF-8 データのエンコーディングの問題を解決するにはどうすればよいですか?
  2024-10-24 04:41:02
• 春のMVCレストラン
  2024-10-24 04:40:30
• データベースセキュリティのためにエスケープ関数を使用するよりも、準備されたパラメータ化されたクエリの方が安全であるのはなぜですか?
  2024-10-24 04:40:02
• Python 文字列内の文字を反復処理するにはどうすればよいですか?
  2024-10-24 04:39:30
• C でユーザー定義のコピー コンストラクターが必要になるのはどのような場合ですか?
  2024-10-24 04:39:02
• Python 3.3 の「yield from」構文の機能と応用は何ですか?
  2024-10-24 04:38:31
• EverValue Coin (EVA) により、投資家は追加コストを負担せずにビットコインマイニングの報酬から利益を得ることができます
  2024-10-24 04:38:09

最新の問題

function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";

から 2024-04-29 11:01:01

0

2

1659

Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?

から 2024-04-23 00:22:19

0

10

1813

子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。

から 2024-04-19 15:37:47

0

1

1541

親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');

から 2024-04-18 23:52:34

0

1

1449

CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア

から 2024-04-16 10:10:18

0

0

1499

関連トピック

詳細>

• 仮想マシン ソフトウェア
• 構成管理ツールとは何ですか?
• スワッガーの使用方法
• Windowsウィンドウを最小化するショートカットキーの紹介
• アロー関数と通常の関数の違い
• XP でパワーオン パスワードをキャンセルする
• データベースの疑いを修復する方法
• Huobi.com でのビットコインの売買プロセス