Wie behebt man einen Webkit-Fehler mit :hover und mehreren Selektoren für benachbarte Geschwister?

Webkit-Fehler mit :hover und mehreren Selektoren für benachbarte Geschwister

In Browsern wie Safari und Chrome funktioniert die Pseudoklasse :hover korrekt mit benachbarten Geschwisterselektoren, z. B. a:hover div. Allerdings tritt ein Fehler auf, wenn mehrere benachbarte Geschwisterselektoren verwendet werden, wie in div:hover a div.

Das Problem

In Webkit-Browsern funktionierte der div:hover a div-Selektor nicht richtig und schlug fehl um Stil auf das

anzuwenden. Element wie erwartet. Paradoxerweise löste das Hinzufügen eines Geschwisterkombinators wie div:hover ~ div, mit oder ohne Styling, das Problem aus unerklärlichen Gründen.

Lösung

Um diesen Webkit-Fehler zu umgehen, können Sie eine Technik anwenden Animation auf dem Körperelement. Indem Sie eine animierte CSS-Klasse mit einer leeren Animation an das Body-Element anhängen, können Sie den Browser effektiv dazu verleiten, den Fehler zu beheben:

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

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

Diese Lösung funktioniert, indem sie ein erneutes Rendern der Seite auslöst, was zwingt Webkit zur korrekten Auflösung der Geschwisterselektoren. Sie können ein Beispiel dieser Problemumgehung in Aktion auf JS Fiddle sehen: http://jsfiddle.net/jalbertbowdenii/ds2yY/1/.

Das obige ist der detaillierte Inhalt vonWie behebt man einen Webkit-Fehler mit :hover und mehreren Selektoren für benachbarte Geschwister?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn