更改SVG路徑嵌入到按鈕

Question

我可以很容易地更改SVG路徑，但是當我將它插入按鈕時，CSS：hover在Firefox中不起作用。請檢查JSfiddle demo

CSS：

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

Answer 1

Button類似乎並沒有搞亂任何東西。你應該嘗試改變CSS來指向Button而不是＃Fill-1和＃Fill-2。他們不需要。

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

Answer 2

該按鈕吞下鼠標事件，所以SVG從不會獲取它們。儘管將鼠標懸停在按鈕上可以使懸停工作成爲可能。您需要確保您定位的項目沒有內嵌填充屬性，以便按鈕的填充可以對其進行設置。

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

like so

有一個Firefox bug跟蹤這個