为什么 webkit 过滤器悬停时的堆叠顺序会发生变化? [英] Why does stacking order change on webkit filter hover?

问题描述

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

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

这是我的 JSFiddlehttp://jsfiddle.net/r13ycy1p/

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

如何反转效果以阻止绝对位置 div 被隐藏?

这是我的 HTML

<li><a href="#"><div class="slide-content"><div class="slide-title"><h1>你好世界</h1>

<div class="slide-desc"><p>关于某事的描述</p>

<img src="http://img4.wikia.nocookie.net/__cb20130920142351/simpsons/images/e/e9/Pic_1187696292_8.jpg"/></a>

CSS

li {列表样式:无；}.slide-content {位置:绝对；红色;顶部:50px；}li a:悬停img{-webkit-filter:灰度(100%)；/* 对于 Webkit 浏览器 */}

解决方案

这是因为 none 以外的值建立了一个 堆叠上下文.这在规范(目前处于工作草案状态):

<块引用>

2 模块交互

该规范定义了一组影响应用这些属性的元素的视觉渲染；这些效果在元素调整大小后应用根据 [CSS21] 中的可视化格式模型定位.一些这些属性的值导致创建一个包含阻止和/或创建堆叠上下文.

还有规范说明:

<块引用>

5 图形过滤器:过滤器属性

none 以外的计算值 导致创建一个堆叠上下文 [CSS21] 与 CSS 不透明度相同.

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?

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

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

Please excuse Homer, I just needed an image.

EDIT: How can I reverse the effects to stop the absolutely position div from being hidden?

Here's my 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>

The CSS

li {
list-style:none;    
}

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

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

解决方案

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 Module interactions

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.

Also the spec states:

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.

这篇关于为什么 webkit 过滤器悬停时的堆叠顺序会发生变化?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！