鼠标悬停父元素时修改img CSS样式失效？求故障排查

你的CSS选择器写错了，导致滤镜无法生效：
.button-type .wp-block-button__link:hover img * 这个选择器试图选中<img>标签内部的子元素，但<img>是替换元素，外部加载的SVG DOM不会被页面CSS访问到，这个选择器根本找不到目标对象。

直接把选择器改成 .button-type .wp-block-button__link:hover img，将滤镜直接应用在<img>元素本身即可解决问题。

修正后的完整CSS代码：

.button-icon {
  height: 25px;
}
.button-type .wp-block-button__link{
  color: #33FFFF;
  background-color: #FF0000;
  border-color: #33FFFF;
  border-bottom-style: solid;
}
.button-type .wp-block-button__link:hover{
  color: #fff;
  background-color: #FF9999;
  border-bottom-color: #FF9999;
}
.button-type .wp-block-button__link:hover img {
  filter: brightness(0) invert(1) !important;
}

额外说明：

• 当SVG通过<img>标签引用时，页面CSS只能控制<img>元素本身的样式（如滤镜、宽高），无法直接修改SVG内部元素的样式。
• 如果需要更精细地控制SVG内部样式，建议将SVG代码直接嵌入HTML中，而非通过img标签引用。

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