Wie behebt man einen Webkit-Fehler mit :hover und mehreren Selektoren für benachbarte Geschwister?-CSS-Tutorial-php.cn

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

DDD

Freigeben： 2024-10-23 22:50:29

Original

135 Leute haben es durchsucht

How to Resolve Webkit Bug with :hover and Multiple Adjacent-Sibling Selectors?

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>

Nach dem Login kopieren

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!