将SVG Path Embedded更改为按钮

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跟踪此

Answer 2

按钮类似乎没有弄乱任何东西。您应该尝试将css更改为指向Button而不是#Fill-1和#Fill-2。他们不需要。

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