Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > CSS-Tutorial > Wie behebt man einen Webkit-Fehler mit :hover und mehreren Selektoren für benachbarte Geschwister?

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

DDD
Freigeben： 2024-10-23 22:50:29
Original
235 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!

Quelle：php
Vorheriger Artikel：Lesen CSS-Auswahl-Engines von links nach rechts oder von rechts nach links? Nächster Artikel：Wie behebe ich Div-Überlappungsprobleme mit Z-Index?
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
Neueste Artikel des Autors
Aktuelle Ausgaben
function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...
Aus 2024-04-29 11:01:01
0
3
2052
So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?
Aus 2024-04-23 00:22:19
0
11
2206
Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.
Aus 2024-04-19 15:37:47
0
1
1862
Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...
Aus 2024-04-18 23:52:34
0
1
1749
Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen
Aus 2024-04-16 10:10:18
0
0
1772
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage