Question

我有两个元素，一个锚点及其伪元素。在下面的代码段中，伪元素位于其父元素的后面。悬停时，伪元素会缩放。

.btn:link,
.btn:visited {
    text-transform: uppercase;
    text-decoration: none;
    padding: 15px 40px;
    display: inline-block;
    border-radius: 100px;
    transition: all 0.2s;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.4);
    position: relative;
    margin: 40px;
}

.btn:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2);
}

.btn-white {
    background-color: #fff;
    color: #777;
}

.btn::after {
    content: "";
    display: inline-block;
    height: 100%;
    width: 100%;
    border-radius: 100px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: all 0.2s;
} 

.btn-white::after {
    background-color: red;
}

.btn:hover::after {
    transform: scale(1.5);
}

<a href="#" class="btn btn-white">Example</a>

我知道，当按钮没有悬停时，伪元素位于父元素下方，因为它们处于相同的堆叠上下文中，并且伪元素的z索引为-1。但是，将鼠标悬停时，由于父级使用transform属性，它们处于不同的堆叠上下文中。因此，伪元素覆盖了父元素。但是，父元素中的“示例”文本仍然可见。为什么会这样？

Answer 1

html有三个元素。 <a>本身，::after和文本节点“ Example”。 ::after是<a>

的孩子

在正常状态下，<a>是定位元素，但是由于未设置z-index，因此不会形成新的堆叠上下文。 ::after也是z-index -1的定位元素，它具有堆栈上下文并且位于<a>下。在这种状态下，<a>和::after都在根堆栈上下文下。

悬停时，将变换应用于<a>，就形成了堆栈上下文。 ::after和“示例”文本节点将被限制在此堆叠上下文中。文本节点的自动z索引大于::after的-1。文本节点将呈现在::after上方。

Answer 2

.btn:hover::after {
transform: scale(1.5);
z-index: 1;

}

我认为这会覆盖文本的堆叠顺序

从下级父元素仍可见文本

2 个答案: