Question

我有一个.cube类的块 - 它实现了一个红色立方体。

.cube {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 20px;
    height: 20px;
    background: red;
    transition: .3s opacity;
}

伪选择器:before周围有一个“边框”（实际上它只是.cube类周围更大的立方体。）

.cube::before {
    position: absolute;
    top: -10px; left: -10px;
    right: -10px; bottom: -10px;
    content: '';
    background: black;
    z-index: -1;
}

在:hover上，我在.cube课程中更改了不透明度。

.cube:hover {
    opacity: .5;
}

问题是：为什么悬停时.cube类消失，反过来，它不在“{1}}”之下。在哪里？

这是JSFiddle。谢谢！

:before

.cube {
	position: absolute;
	top: 50px;
	left: 50px;
	width: 20px;
	height: 20px;
	background: red;
	transition: .3s opacity;
}

.cube::before {
	position: absolute;
	top: -10px; left: -10px;
	right: -10px; bottom: -10px;
	content: '';
	background: black;
	z-index: -1;
}

.cube:hover {
	opacity: .5;
}

Answer 1

Paulie_D是对的！堆叠环境正在受到影响。请在此处查看此信息以获取更多信息：

https://www.w3.org/TR/css3-color/#transparency

我决定修改你的例子，以便更容易地展示出什么。我必须说，你不会每天都看到浏览器堆叠环境以这种方式发挥作用！（对不起）

这就是我所做的：

延长原始transition
添加了不同时间的transition来区分临时变更的每个方向。
将颜色从黑色更改为青色以帮助改变视觉颜色（更亮的颜色有助于人们看到堆栈中“上方”和“下方”之间的差异
为（目前）青色opacity元素添加了简化:before样式。

这是小提琴：
https://jsfiddle.net/c5d5thhk/

说明：鼠标悬停在方框上。请注意：

相对于相关transition的时间的颜色变化。
颜色的外观（受opacity）的影响永远不会真正完成回到其初始状态（直到transition的最后一个'结束'）这样编码。这是因为堆叠上下文的固有变化永远不会像transition命令那样顺利地返回到初始状态。这就是我将着色更改为青色并添加了opacity规则的原因。
不要忘记：::before本身就是之前源序列中其余元素。将::before更改为::after以帮助展示围栏的另一面可能会有所帮助。 https://jsfiddle.net/c5d5thhk/1/

是的，在这个演示的几个浏览器上有一些错误的行为;有时，transition永远不会允许堆叠上下文返回其初始顺序，即使opacity在transition的整个3s期间完成了它的路线（3秒） - 如果这妨碍了您的测试，请稍微使用鼠标;如果它本身没有，那么搅动应该会在一定时间内解决它。

编辑：

刚刚看到MDN比W3C（惊讶，惊讶）更清楚地分析了堆叠环境如何发生。在这里查看：
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

另外，检查一下是否影响堆栈：
https://developer.mozilla.org/en-US/docs/Web/CSS/isolation

编辑2 :(添加评论）
这里有更多信息。至于您反复提出的问题，您的红框box model位于黑匣子后面。但是，由于渲染过程是为了解决透明度问题，因此在使用opacity样式时，示例中不会显示它。换句话说：即使黑盒子有一个缩小的opacity，其中一个人希望它背后的任何内容都显示出来，但由于alpha通道的处理过程，红框仍然不会显示。如果您想了解更多相关信息，请尝试使用SVG运行。

悬停在其上的当前元素隐藏（不透明度已更改）

1 个答案:

编辑：