如何修改go-top:hover图标颜色并解决样式不生效问题

问题复现 #

预期实现悬停时go-top返回顶部按钮为白色背景、绿色箭头，初始编写代码如下：

.go-top:hover {
    background-color: #fff;
    color: #069146;
    opacity: 100;
}

实际运行后，悬停状态下箭头仍显示为橙色，未达到预期效果。

问题根因 #

• 颜色继承失效：返回顶部的箭头通常不是按钮容器本身的文本，一般通过伪元素（::before/::after）、图标字体子标签、内嵌SVG实现，这类元素本身已经被设置了更高优先级的橙色样式，父容器的color属性无法直接覆盖到图标元素上。
• 属性值错误：CSS的opacity属性取值范围为0到1，填写100属于无效值，完全不透明的正确取值为1。

修复代码 #

根据箭头的实现方式二选一即可：

• 图标字体/伪元素实现箭头的场景

.go-top:hover {
    background-color: #fff;
    opacity: 1;
}
/* 按实际DOM结构调整图标选择器，常见的有i标签、icon类、伪元素 */
.go-top:hover i,
.go-top:hover .iconfont,
.go-top:hover::before,
.go-top:hover::after {
    color: #069146;
}

如果上述代码优先级不足以覆盖原有橙色样式，可以给颜色属性加上!important标记强制生效。

• 内嵌SVG实现箭头的场景

.go-top:hover {
    background-color: #fff;
    opacity: 1;
}
/* 填充类SVG用fill，描边类SVG替换为stroke属性即可 */
.go-top:hover svg path {
    fill: #069146;
}

排查提示：打开浏览器开发者工具，选中箭头元素后查看样式面板，定位到给箭头设置橙色的具体选择器，编写优先级更高的选择器覆盖规则即可。

内容的提问来源于stack exchange，提问作者theredindian