将SVG Path Embedded更改为按钮

时间:2015-10-21 04:05:38

标签: css3 svg

我可以非常轻松地更改SVG路径但是当我将它插入按钮时,css:hover在firefox中无效。请检查JSfiddle demo

CSS:

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

2 个答案:

答案 0 :(得分:1)

该按钮吞下鼠标事件,因此SVG永远不会获取它们。您可以通过将鼠标悬停在按钮上来进行悬停工作。您需要确保您所定位的项目没有内联填充属性,以便按钮的填充可以设置它。

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

like so

Firefox bug跟踪此

答案 1 :(得分:0)

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

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