Html 为什么'；当我把鼠标悬停在按钮上时，它不工作吗？

我有一个按钮，但当我将鼠标悬停在上面时，文本不想更改颜色（颜色更改类--

。活动：悬停

）。出于某种奇怪的原因，它不想改变。另外，正如您在我的代码中看到的，我想将文本颜色更改为

#fff

（白色）。我经常使用

：hover

选择器，我不知道问题出在哪里

正文{
字体系列：“Exo 2”，无衬线；
保证金：0；
填充：0；
证明内容：中心；
高度：100vh；
对齐项目：居中；
}
.主动{
文字装饰：无；
颜色：#000；
位置：相对位置；
填充：8px 30px；
背景：#fff；
文本转换：大写；
字体大小：15px；
框大小：边框框；
过渡：0.5s；
边框：2倍实心#000；
}
.活动：之前{
内容：''；
位置：绝对位置；
排名：0；
左：0；
宽度：50%；
身高：100%；
背景：#000；
z指数：1；
变换：scaleX（0）；
转变：转变0.5s；
变换原点：左；
}
.活动：悬停{
颜色：#fff；
}
。活动：悬停：之前{
变换：scaleX（1）；
转变：转变0.5s；
变换原点：右；
}
.活动：之后{
内容：''；
位置：绝对位置；
排名：0；
右：0；
宽度：50%；
身高：100%；
背景：#000；
z指数：1；
变换：scaleX（0）；
转变：转变0.5s；
变换原点：右；
}
。活动：悬停：之后{
变换：scaleX（1）；
转变：转变0.5s；
变换原点：左；
}

---

您将

：在
元素之前，用该
z-index
值覆盖文本。
根据您所拥有的所有变体，包括按钮的背景，我建议您在文本中使用
，并在该元素上使用更高的
z-index
：


正文{
字体系列：无衬线；
利润率：30像素；
文本对齐：居中；
}
.主动{
文字装饰：无；
颜色：#000；
位置：相对位置；
填充：8px 30px；
背景：#fff；
字体大小：15px；
过渡：0.5s；
边框：2倍实心#000；
}
.有效跨度{
位置：相对位置；
过渡：颜色。3s线性；
z指数：2
}
.主动：之前，
.活动：之后{
内容：''；
位置：绝对位置；
排名：0；
左：0；
宽度：50%；
身高：100%；
背景：#000；
z指数：1；
变换：scaleX（0）；
转变：转变0.5s；
变换原点：左；
}
.活动：之后{
左：自动；
右：0；
变换原点：右；
}
.激活：悬停范围{
颜色：#fff；
}
.活动：悬停：之前，
。活动：悬停：之后{
变换：scaleX（1）；
转变：转变0.5s；
}
您可以仅使用背景着色而不需要更多的伪元素来实现相同的效果


正文{
字体系列：“Exo 2”，无衬线；
}
.主动{
文字装饰：无；
颜色：#000；
位置：相对位置；
填充：8px 30px；
显示：内联块；
利润率：10px；
背景图像：
线性梯度（#fff，#fff），
线性梯度（#000，#000）；
背景大小：100%200%，0%200%；
背景位置：左50%顶部-100%，50%50%；
背景重复：无重复；
文本转换：大写；
字体大小：15px；
框大小：边框框；
过渡：背景尺寸0.5s，背景位置0s 0.5s；
边框：2倍实心#000；
}
.活动：悬停{
颜色：#fff；
背景大小：0%200%，800%200%；
背景位置：50%50%；
转换：背景大小1s，背景位置0s 1s；
}
您的
.active:after
覆盖整个按钮，包括文本。如何停止。active:after覆盖按钮无需添加额外的跨距，您只需调整z索引：