Why Does Webkit Filter Hover Modify Stacking Order and How to Reverse It?

Why Webkit Filter Hover Modifies Stacking Order

When you apply a Webkit filter to an image on hover, you may notice an unexpected change in its stacking order. This is due to the creation of a stacking context by the filter.

The Webkit filter property, when set to a value other than none, establishes a stacking context. A stacking context is a three-dimensional space where elements are stacked in the order of their inclusion in the document tree or by the z-index property. This means that elements within the stacking context will always appear on top of elements outside the context.

In your case, the Webkit filter applied to the image creates a stacking context. The image element is placed within this context, while the absolutely positioned DIV "slide-content" is outside the context. When you hover over the image, the filter is applied, creating the stacking context and causing the image to be stacked on top of the DIV, obscuring it.

Reversing the Effect

To prevent the absolutely positioned DIV from being hidden, you can either remove the Webkit filter or set its value to none on hover. Here's an updated CSS:

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

This will disable the filter on hover, allowing the DIV to be displayed properly without using z-indexing.

The above is the detailed content of Why Does Webkit Filter Hover Modify Stacking Order and How to Reverse It?. For more information, please follow other related articles on the PHP Chinese website!