Html 当按钮悬停时，类的背景色将强制更改为不同的颜色

伪元素

：：after

用于在类名为

.btn

的按钮后面创建新内容

由于某种原因，

红色

出现在整个按钮上，当

.btn--white

悬停时应保持

白色

。

.btn:：after

的

z-index

被设置为

-1

，并且它很好地隐藏了颜色，直到按钮悬停

应在

.btn--white:：after

中的

背景色应为
白色
，如果选择了颜色
白色
，则背景色确实可以正常工作。当选择不同的
背景色
，例如
红色
时，问题开始出现

这可以用CSS来修复吗


正文{
背景色：#777；
}
.按钮盒{
位置：绝对位置；
最高：40%；
左：50%；
转换：翻译（-50%，-50%）；
文本对齐：居中；
}
.btn，
.btn:link，
.btn:已访问{
文本转换：大写；
文字装饰：无；
填充：1.5雷姆4雷姆；
显示：内联块；
边界半径：10雷姆；
位置：相对位置；
字体大小：1.6rem；
边界：无；
光标：指针；
过渡：均为0.2s；
}
.btn：：之后{
内容：“；
显示：内联块；
身高：100%；
宽度：100%；
边界半径：10雷姆；
位置：绝对位置；
排名：0；
左：0；
z指数：-1；
过渡：全部为0.4s；
}
.btn:悬停{
转换：translateY（-3px）；
盒影：0 1rem 2rem rgba（0,0,0,0.2）；
}
.btn:悬停：：之后{
转换：scaleX（1.4）scaleY（1.6）；
/*不透明度：0*/
}
.btn：活动{
大纲：无；
转换：translateY（-1px）；
盒子阴影：0.5雷姆1雷姆rgba（0,0,0,0.2）；
}
.btn--白色{
背景色：#fff；
颜色：#777；
}
.btn--白色：：之后{
背景色：红色；
}
从你的问题来看，我不清楚你到底想达到什么效果。但是，我猜您希望按钮悬停时保持
白色
，并且
红色
显示在按钮后面。请参见下面的示例

按钮将颜色更改为红色的原因是
：：after
元素在技术上是按钮的子元素，因此在Z轴上出现在按钮上方

为了获得您想要的结果，我创建了一个继承按钮背景颜色的
：：before
元素，并将其定位在
：：after
元素之上


正文{
背景色：#777；
}
.按钮盒{
位置：绝对位置；
最高：40%；
左：50%；
转换：翻译（-50%，-50%）；
文本对齐：居中；
}
.btn，
.btn:link，
.btn:已访问{
文本转换：大写；
文字装饰：无；
填充：1.5雷姆4雷姆；
显示：内联块；
边界半径：10雷姆；
位置：相对位置；
字体大小：1.6rem；
边界：无；
光标：指针；
过渡：均为0.2s；
}
.btn：：之前{
背景色：继承；
内容：“；
显示：内联块；
身高：100%；
宽度：100%；
边界半径：10雷姆；
位置：绝对位置；
排名：0；
左：0；
z指数：-1；
}
.btn：：之后{
内容：“；
显示：内联块；
身高：100%；
宽度：100%；
边界半径：10雷姆；
位置：绝对位置；
排名：0；
左：0；
z指数：-2；
过渡：全部为0.4s；
}
.btn:悬停{
转换：translateY（-3px）；
盒影：0 1rem 2rem rgba（0,0,0,0.2）；
}
.btn:悬停：：之后{
转换：scaleX（1.4）scaleY（1.6）；
/*不透明度：0*/
}
.btn：活动{
大纲：无；
转换：translateY（-1px）；
盒子阴影：0.5雷姆1雷姆rgba（0,0,0,0.2）；
}
.btn--白色{
背景色：#fff；
颜色：#777；
}
.btn--白色：：之后{
背景色：红色；
}

谢谢，我很高兴它解决了这个问题。我仍然不明白为什么遗传的背景颜色是红色而不是白色。我一定是错过了一些继承的概念或什么。好吧，经过一些思考，我终于明白了为什么它会起作用。.btn:：before的大小与.btn相同，它覆盖了背景中红色的部分，因此它最终看起来应该是红色的。不知何故，我认为：：在继承：：aftrer的背景色并不知何故将元素推到父元素后面之前，我知道我甚至没有意义。.btn:：before的颜色确实是白色：））正是。而
：：before
和
：：after
元素都位于
.btn
元素的顶部。因此
：：before
元素只是掩蔽
：：after
元素的一部分。