为什么 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中文网其他相关文章！