css - 将嵌入的 SVG 路径更改为按钮

Question

我可以很容易地更改 SVG 路径，但是当我将它插入按钮时，css:hover 在 firefox 中不起作用。请查看JSfiddle demo

CSS:

#Fill-1 {
  fill: red;
}
#Fill-1:hover {
  fill: black;
}

Answer 1

按钮会吞下鼠标事件，因此 SVG 永远不会获取它们。不过，您可以通过将悬停定位到按钮来使悬停工作。您需要确保您定位的元素没有内联填充属性，以便按钮的填充可以设置它。

button {
     fill:red;
 }
button:hover {
     fill:black;
 }

like so

有一个Firefox bug跟踪这个