悬停时更改 SVG 填充颜色不起作用答案

【问题标题】：Change SVG fill color on hover isn't working悬停时更改 SVG 填充颜色不起作用
【发布时间】：2021-11-24 22:49:54
【问题描述】：

我正在尝试在悬停时更改 SVG 图像的颜色，但似乎无法正常工作。

代码如下：

.signup-icon {
  fill: #515151;
}

.signup-icon:hover {
  fill: #FFFFFF;
}

<svg class="signup-icon" width="20" height="20" viewBox="0 0 20 19" xmlns="http://www.w3.org/2000/svg">
      <path d="M19.6977 8.82624L10.6068 0.64442C10.4398 0.493657 10.2227 0.410156 9.99769 0.410156C9.77267 0.410156 9.55566 0.493657 9.38862 0.64442L0.297707 8.82624C0.128761 8.97975 0.0237846 9.19113 0.00357345 9.4185C-0.0166377 9.64588 0.0493999 9.87259 0.188621 10.0535C0.23709 10.1277 0.29872 10.1923 0.37045 10.2444C0.527528 10.3541 0.715218 10.4114 0.906783 10.408H2.72496V17.6808C2.72496 17.9219 2.82076 18.153 2.99124 18.3235C3.16173 18.494 3.39295 18.5899 3.63406 18.5899H16.3613C16.6024 18.5899 16.8337 18.494 17.0042 18.3235C17.1747 18.153 17.2704 17.9219 17.2704 17.6808V10.408H19.0886C19.2802 10.4114 19.4679 10.3541 19.625 10.2444C19.6967 10.1923 19.7583 10.1277 19.8068 10.0535C19.8728 9.96969 19.9222 9.87397 19.9522 9.77162C20.0045 9.60616 20.0082 9.42923 19.9631 9.2617C19.918 9.09417 19.826 8.94311 19.6977 8.82624ZM13.6341 16.7717H4.54315V9.49896C4.54315 9.25785 4.44741 9.02658 4.27692 8.85609C4.10643 8.6856 3.87516 8.58987 3.63406 8.58987H3.27955L9.99769 2.54439L16.7159 8.58987H16.3613C16.1202 8.58987 15.889 8.6856 15.7185 8.85609C15.548 9.02658 15.4522 9.25785 15.4522 9.49896V16.7717H13.6341Z"/>
    </svg>

我尝试添加!important，但它不起作用。即使没有悬停时的属性也不会被考虑在内。虽然，如果我使用 fill 属性在 SVG 上添加一些内联样式，那么它就可以工作。但是我仍然无法使悬停效果起作用。

【问题讨论】：

似乎work，将帖子编辑成代码 sn-p 也可以，但随后它似乎反驳了这个问题
你的 svg 在中间是透明的，所以它只改变了边框。
是否只需要设置pointer-events="all"
确实它在 sn-p 中工作，但我仍然不明白为什么它在我的浏览器中不起作用。我已经将指针事件设置为 all 并且它没有改变任何东西。如果 svg 在中间是透明的，我该如何解决这个问题以使其正常工作？
@TimothyCohen 可能是前面提到的 z-index 问题或指针事件问题，但是，除非您发布完整代码，否则我们无法为您提供帮助

标签： css svg hover fill

【解决方案1】：

它确实有效，但是由于白色背景和悬停时设置的白色，很难看到。

.signup-icon {
  fill: red;
}

.signup-icon:hover {
  fill: green;
}

<svg class="signup-icon" width="20" height="20" viewBox="0 0 20 19" xmlns="http://www.w3.org/2000/svg">
      <path d="M19.6977 8.82624L10.6068 0.64442C10.4398 0.493657 10.2227 0.410156 9.99769 0.410156C9.77267 0.410156 9.55566 0.493657 9.38862 0.64442L0.297707 8.82624C0.128761 8.97975 0.0237846 9.19113 0.00357345 9.4185C-0.0166377 9.64588 0.0493999 9.87259 0.188621 10.0535C0.23709 10.1277 0.29872 10.1923 0.37045 10.2444C0.527528 10.3541 0.715218 10.4114 0.906783 10.408H2.72496V17.6808C2.72496 17.9219 2.82076 18.153 2.99124 18.3235C3.16173 18.494 3.39295 18.5899 3.63406 18.5899H16.3613C16.6024 18.5899 16.8337 18.494 17.0042 18.3235C17.1747 18.153 17.2704 17.9219 17.2704 17.6808V10.408H19.0886C19.2802 10.4114 19.4679 10.3541 19.625 10.2444C19.6967 10.1923 19.7583 10.1277 19.8068 10.0535C19.8728 9.96969 19.9222 9.87397 19.9522 9.77162C20.0045 9.60616 20.0082 9.42923 19.9631 9.2617C19.918 9.09417 19.826 8.94311 19.6977 8.82624ZM13.6341 16.7717H4.54315V9.49896C4.54315 9.25785 4.44741 9.02658 4.27692 8.85609C4.10643 8.6856 3.87516 8.58987 3.63406 8.58987H3.27955L9.99769 2.54439L16.7159 8.58987H16.3613C16.1202 8.58987 15.889 8.6856 15.7185 8.85609C15.548 9.02658 15.4522 9.25785 15.4522 9.49896V16.7717H13.6341Z"/>
    </svg>

【讨论】：