我注意到在应用 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 */
}
最佳答案
这是因为 none
以外的值建立了一个 stacking context .这记录在 spec 中(目前处于工作草案状态):
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 Graphic filters: the filter property
A computed value of other than
none
results in the creation of a stacking context [CSS21] the same way that CSS opacity does.
关于css - 为什么 webkit 过滤器悬停时堆叠顺序会发生变化?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25764404/