为什么堆栈顺序更改webkit过滤器悬停？ [英] Why does stacking order change on webkit filter hover?

问题描述

我注意到在应用webkit过滤器时我的堆叠顺序的一个奇怪的问题。为什么当我将鼠标悬停在图像上时，堆叠顺序会发生变化？

I've noticed a weird issue with my stacking order when applying a webkit filter. Why, when I hover over the image does the stacking order change?

我不想使用z-indexing来修复这个问题， 。

I'd rather not have to use z-indexing to fix this, as it breaks other site elements.

这是我的JSFiddle
http：// jsfiddle .net / r13ycy1p /

Here's my JSFiddle http://jsfiddle.net/r13ycy1p/

请原谅荷马，我只需要一张图片。

Please excuse Homer, I just needed an image.

这是我的HTML

<ul>
<li>
    <a href="#">
        <div class="slide-content">
            <div class="slide-title">
                <h1>hello world</h1>
            </div>
            <div class="slide-desc">
                <p>a description about something</p>
            </div>
        </div>
        <img src="http://img4.wikia.nocookie.net/__cb20130920142351/simpsons/images/e/e9/Pic_1187696292_8.jpg"/>

    </a>
</li>
</ul>

CSS

li {
list-style:none;    
}

.slide-content {
position:absolute;
color:red;
top:50px;
}

li a:hover img{
-webkit-filter: grayscale(100%); /* For Webkit browsers */
}

推荐答案

这是因为 none 以外的值会建立堆叠上下文。这在 规范 （目前在工作草案中）状态）：

This is because a value other than none establishes a stacking context. This is documented in the spec (which is currently in Working Draft status):

2模块交互

2 Module interactions

此规范定义了一组影响
视觉呈现的CSS属性应用这些属性的元素;
这些效果在元素已经被调整大小后应用，
根据[CSS21]中的Visual格式化模型定位。这些属性的一些
值会导致创建包含
块和/或创建堆叠上下文。

This specification defines a set of CSS properties that affect the visual rendering of elements to which those properties are applied; these effects are applied after elements have been sized and positioned according to the Visual formatting model from [CSS21]. Some values of these properties result in the creation of a containing block, and/or the creation of a stacking context.

规范还规定：

5图片过滤器：过滤器属性

5 Graphic filters: the filter property

除了 none 的计算值导致创建
堆栈上下文 [CSS21]与CSS透明度相同。

A computed value of other than none results in the creation of a stacking context [CSS21] the same way that CSS opacity does.

这篇关于为什么堆栈顺序更改webkit过滤器悬停？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！