如何在鼠标悬停父元素按钮时改变SVG图标颜色？

问题背景 #

现有嵌套结构的按钮HTML代码：

<button className="btn">
  <span>
    <img className="logo" src={require("./like.svg").default} />
  </span>
Like
</button>

当前通过CSS设置SVG的默认颜色：

/* filter 属性控制SVG的颜色 */
.logo {
  filter: invert(43%) sepia(0%) saturate(1%) hue-rotate(198deg)
    brightness(94%) contrast(94%);
}

需求是：当鼠标悬停在整个按钮（.btn）上时，SVG图标同步变为指定的悬停颜色，而不是仅悬停SVG本身才变色。

解决方案 #

使用CSS的后代选择器，通过父元素.btn的:hover状态触发子元素.logo的样式变化，替换原来的.logo:hover选择器即可。

修改后的CSS代码：

/* SVG默认样式 */
.logo {
  filter: invert(43%) sepia(0%) saturate(1%) hue-rotate(198deg)
    brightness(94%) contrast(94%);
  /* 可选：添加过渡动画让颜色变化更平滑 */
  transition: filter 0.3s ease;
}

/* 按钮悬停时，同步改变SVG的颜色 */
.btn:hover .logo {
  /* 替换成你需要的悬停颜色对应的filter值 */
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
}

原理说明 #

CSS的后代选择器（父元素 子元素）可以跨越层级匹配后代元素，这里按钮.btn是.logo的祖先元素，当鼠标悬停在.btn上时，浏览器会匹配到其内部的.logo元素，并应用对应的filter样式，从而实现按钮悬停时SVG同步变色的效果。添加transition属性能让颜色变化更自然平滑。

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