如何实现ss-go-top按钮hover时切换背景色与箭头颜色

问题根源 #

你当前的CSS只在鼠标悬停/聚焦时修改了a标签的背景色，但没有同步修改SVG内部路径（path）的填充色，同时还存在一个基础选择器错误：第一个选择器ss-go-top缺少类选择器的前缀.，导致该元素的固定定位、边框等基础样式无法生效。

修改后的完整CSS代码 #

/* 纠正类选择器，添加前缀. */
.ss-go-top {
  z-index: 2;
  opacity: 0;
  border: 2px solid #07b8b5; /* 简化边框写法 */
  border-radius: 50%;
  visibility: hidden;
  -webkit-transform: translate3d(0, 200%, 0);
  transform: translate3d(0, 200%, 0);
  -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  position: fixed;
  bottom: 8.4rem;
  right: 4rem;
}

.ss-go-top a {
  text-decoration: none;
  display: block;
  height: 6.4rem;
  width: 6.4rem;
  border-radius: 50%;
  background-color: transparent;
  -webkit-transition: all .3s;
  transition: all .3s;
  position: relative;
}

.ss-go-top a:hover,
.ss-go-top a:focus {
  background-color: #07b8b5;
}

.ss-go-top svg {
  height: 1.2rem;
  width: 1.2rem;
  position: absolute;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  left: 50%;
  top: 50%;
}

.ss-go-top svg path {
  fill: #07b8b5;
  -webkit-transition: fill .3s; /* 添加填充色过渡 */
  transition: fill .3s;
}

/* 新增：悬停/聚焦时修改箭头颜色为白色 */
.ss-go-top a:hover svg path,
.ss-go-top a:focus svg path {
  fill: #ffffff;
}

.ss-go-top.link-is-visible {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

关键修改点说明 #

• 修复类选择器：将ss-go-top改为.ss-go-top，确保CSS能正确选中目标元素。
• 添加箭头颜色过渡：给ss-go-top svg path加上transition: fill .3s，让箭头颜色变化和背景色变化同步，过渡更自然。
• hover状态下修改箭头颜色：通过.ss-go-top a:hover svg path和.ss-go-top a:focus svg path选择器，在鼠标悬停或元素获得焦点时，把箭头的填充色改为白色。

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