为什么webkit过滤器悬停时堆叠顺序发生变化？

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

我宁愿不必使用z-indexing来解决这个问题，因为它会破坏其他网站元素。

这里是我的jsfiddle http://jsfiddle.net/r13ycy1p/

请原谅荷马，我只是需要的图像。

编辑：我该如何反转效果来阻止绝对位置div被隐藏？

这里是我的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 */ 
}

来源

2014-09-10 KingLouie

这是因为比其他none值建立stacking context。这在spec记载（这是目前在工作状态草案）：

2 Module interactions

该规范定义了一组影响元件的视觉呈现的CSS属性到那些属性被应用; 这些效果在元素大小调整后应用，并且根据[CSS21]中的可视格式模型定位。这些属性的某些值导致创建包含块，和/或创建堆栈上下文。

而且该规范规定：

5 Graphic filters: the filter property

的以外none导致产生一个堆叠上下文 [CSS21]的方式，CSS相同的计算值不透明度。

来源

2014-09-10 11:46:45

好的。你有什么想法看我的代码如何代码扭转这种影响？ – KingLouie 2014-09-10 11:54:35

乍一看，它似乎可以通过[将'1'的'z-index']（http://jsfiddle.net/hashem/r13ycy1p/1/）添加到绝对定位的元素来解决。不过，让我知道它是否不符合您的需求。 – 2014-09-10 12:01:44

不，我不能使用z-index。 – KingLouie 2014-09-10 12:03:01

为什么webkit过滤器悬停时堆叠顺序发生变化？

回答

相关问题