Question

更新：这个问题被一个朋友标记为重复，但是我认为答案仍然非常有价值。我在重复的问题中研究了这些答案，没有提到的transform-style: preserve-3d可以进行转换而无需创建新的堆叠上下文。因此，这个问题比z-index的工作原理更为具体。这也与变换的工作原理有关。

我试图将鼠标悬停在div元素上时添加一些动画。但是，当我在悬停中添加了transform时，其伪子元素的背景色覆盖了div的颜色。似乎这种有线行为仅在使用transform时发生。我想知道这种行为背后的机制是什么。

在下面的代码笔示例中，第一个是带有转换的悬停，第二个是普通悬停。

https://codepen.io/neirongkuifa/pen/PgaEZd

.container {
	width: 100px;
	height: 100px;
	background-color: red;
	position: relative;
  margin-bottom:100px;
}

.move:hover {
	transform: translateY(3px);
}

.changeColor:hover{
  background-color:white
}

.container::after {
	content: '';
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	background-color: green;
	width: 150px;
	height: 150px;
	z-index: -1;
}

<div class="container move">Content</div>
<div class="container changeColor">Content</div>

Answer 1

您正在创建新的堆栈上下文，并且z-index的行为有所不同。

您最好的解决方案是使用转换处理所有内容。我在伪指令中添加了一个transformZ负值以将其向后移动，并在该项目上保留了它以使其工作：

.container {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
  margin-bottom:100px;
  transform-style: preserve-3D;   /*added*/
}

.move:hover {
    transform: translateY(3px);
}

.changeColor:hover{
  background-color:white
}

.container::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    background-color: green;
    width: 150px;
    height: 150px;
    z-index: -1;
    transform: translateZ(-1px); /*added*/
}

<div class="container move">Content</div>
<div class="container changeColor">Content</div>

与转换一起使用时，为什么伪元素背景色会覆盖其父背景色？

1 个答案: