為什麼 Webkit 過濾器懸停會修改堆疊順序以及如何反轉它？

為什麼Webkit 過濾器懸停會修改堆疊順序

當您將Webkit 過濾器應用於懸停時的圖像時，您可能會注意到它的堆疊順序。這是由於過濾器創建了堆疊上下文。

Webkit 過濾器屬性，當設定為除 none 以外的值時，會建立堆疊上下文。堆疊上下文是一個三維空間，其中元素按照其包含在文檔樹中的順序或按 z-index 屬性進行堆疊。這意味著堆疊上下文中的元素將始終出現在上下文之外的元素之上。

在您的情況下，套用於影像的 Webkit 濾鏡會建立一個堆疊上下文。圖像元素放置在此上下文中，而絕對定位的 DIV「幻燈片內容」則位於上下文之外。當您將滑鼠懸停在影像上時，將套用濾鏡，建立堆疊上下文並使影像堆疊在 DIV 頂部，使其模糊。

反轉效果

為了防止絕對定位的 DIV 被隱藏，您可以刪除 Webkit 過濾器或在懸停時將其值設為 none。這是更新的 CSS：

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

這將停用懸停時的過濾器，從而允許 DIV 在不使用 z 索引的情況下正確顯示。

以上是為什麼 Webkit 過濾器懸停會修改堆疊順序以及如何反轉它？的詳細內容。更多資訊請關注PHP中文網其他相關文章！