Warum ändert der Hover des Webkit-Filters die Stapelreihenfolge und wie kann man sie umkehren?

Warum der Webkit-Filter beim Hovern die Stapelreihenfolge ändert

Wenn Sie beim Hovern einen Webkit-Filter auf ein Bild anwenden, bemerken Sie möglicherweise eine unerwartete Änderung seine Stapelreihenfolge. Dies ist auf die Erstellung eines Stapelkontexts durch den Filter zurückzuführen.

Wenn die Webkit-Filtereigenschaft auf einen anderen Wert als „Keine“ festgelegt wird, wird ein Stapelkontext erstellt. Ein Stapelkontext ist ein dreidimensionaler Raum, in dem Elemente in der Reihenfolge ihrer Aufnahme in den Dokumentbaum oder nach der Z-Index-Eigenschaft gestapelt werden. Dies bedeutet, dass Elemente innerhalb des Stapelkontexts immer über Elementen außerhalb des Kontexts angezeigt werden.

In Ihrem Fall erstellt der auf das Bild angewendete Webkit-Filter einen Stapelkontext. Das Bildelement wird in diesem Kontext platziert, während der absolut positionierte DIV „slide-content“ außerhalb des Kontexts liegt. Wenn Sie mit der Maus über das Bild fahren, wird der Filter angewendet, wodurch der Stapelkontext erstellt wird und das Bild über dem DIV gestapelt wird, wodurch es verdeckt wird.

Umkehrung des Effekts

Um zu verhindern, dass der absolut positionierte DIV ausgeblendet wird, können Sie entweder den Webkit-Filter entfernen oder seinen Wert beim Hover auf „Keine“ setzen. Hier ist ein aktualisiertes CSS:

<code class="css">li a:hover img {
  -webkit-filter: none; /* or filter: none; to remove the filter altogether */
}</code>

Dadurch wird der Filter beim Hover deaktiviert, sodass das DIV ohne Z-Indizierung ordnungsgemäß angezeigt werden kann.

Das obige ist der detaillierte Inhalt vonWarum ändert der Hover des Webkit-Filters die Stapelreihenfolge und wie kann man sie umkehren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!