儘管 WebKit 過濾器在 CSS 中懸停，如何保持堆疊順序？

Webkit 過濾器懸停中的堆疊順序更改：了解堆疊上下文

應用WebKit 過濾器時出現有關堆疊順序的奇怪問題：懸停時在影像上，順序意外地發生了變化。要在不破壞其他網站元素的情況下解決此挑戰，請深入研究堆疊上下文的複雜性。

堆疊上下文決定了元素在頁面上顯示的順序。當元素的樣式屬性包含某些值（例如變換、溢位或篩選器）時，元素會建立新的堆疊上下文。

在提供的範例中，當將 WebKit 濾鏡（灰階）套用到映像時，堆疊上下文是自動建立的。這個新建立的上下文會導致絕對定位的 div（“.slide-content”）位於圖像下方，導致其被隱藏。

為了防止這種不良行為並保持原始的堆疊順序，這裡有一個修改後的解決方案：

替換此CSS：

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

使用此替代方案，可以避免創建堆疊上下文：

<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>

透過使用偽元素（： :before) 使用絕對位置並將其放置在圖像下方，我們可以有效地模擬濾鏡的效果，而無需創建新的堆疊上下文。這種巧妙的解決方法可以讓您實現所需的視覺效果，同時保留預期的堆疊順序。

以上是儘管 WebKit 過濾器在 CSS 中懸停，如何保持堆疊順序？的詳細內容。更多資訊請關注PHP中文網其他相關文章！