Wie kann die Stapelreihenfolge trotz WebKit-Filter-Hover in CSS beibehalten werden?

Änderungen der Stapelreihenfolge im Webkit-Filter beim Bewegen des Mauszeigers: Stapelkontexte verstehen

Ein merkwürdiges Problem tritt bei der Stapelreihenfolge auf, wenn ein WebKit-Filter angewendet wird: beim Bewegen des Mauszeigers Über einem Bild verschiebt sich die Reihenfolge unerwartet. Um diese Herausforderung zu lösen, ohne andere Elemente der Website zu stören, tauchen Sie in die Feinheiten des Stapelns von Kontexten ein.

Stapeln von Kontexten bestimmen die Reihenfolge, in der Elemente auf der Seite angezeigt werden. Ein Element erstellt einen neuen Stapelkontext, wenn seine Stileigenschaften bestimmte Werte enthalten, z. B. Transformation, Überlauf oder einen Filter.

Wenn im bereitgestellten Beispiel ein WebKit-Filter (Graustufen) auf das Bild angewendet wird, a Der Stapelkontext wird automatisch eingerichtet. Dieser neu erstellte Kontext führt dazu, dass das absolut positionierte Div („.slide-content“) unter dem Bild positioniert wird, wodurch es ausgeblendet wird.

Um dieses unerwünschte Verhalten zu verhindern und die ursprüngliche Stapelreihenfolge beizubehalten, ist hier ein überarbeitete Lösung:

Ersetzen Sie dieses CSS:

<code class="css">li a:hover img {
  -webkit-filter: grayscale(100%);
}</code>

Mit dieser Alternative, die die Erstellung eines Stapelkontexts vermeidet:

<code class="css">li a:hover img::before {
  content: "";
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  filter: grayscale(100%);
  z-index: -1;
}</code>

Durch die Verwendung eines Pseudoelements (: :before) mit einer absoluten Position und der Platzierung unter dem Bild simulieren wir effektiv die Wirkung eines Filters, ohne einen neuen Stapelkontext zu erstellen. Mit dieser cleveren Problemumgehung können Sie den gewünschten visuellen Effekt erzielen und gleichzeitig die beabsichtigte Stapelreihenfolge beibehalten.

Das obige ist der detaillierte Inhalt vonWie kann die Stapelreihenfolge trotz WebKit-Filter-Hover in CSS beibehalten werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!