懸停時更改svg顏色？

下面是代碼，我有懸停時更改svg顏色？

div.dashboard 
    svg#menu-btn 
     image(xlink:href="/static/icons/svg/menu-1.svg")

和CSS是

#menu-btn:hover { 
    margin-left: 5px; 
    height: 50px; 
    width: 50px; 
    fill: red; 
    image { 
     height: 50px; 
     width: 50px; 
     fill: red; 
    } 
}

的SVG的顏色仍然是黑色的，並不會變成紅色。我哪裏錯了？

來源

2017-06-15 georoot

是否在.svg文件中應用了填充？你實際上並沒有聲明它應該改變''：hover''上的''red''。 – Crowes

這個問題與你嘗試這種方法相似嗎？ https://stackoverflow.com/questions/11978995/how-to-change-color-of-svg-image-using-css-jquery-svg-image-replacement – varto

@Crowes很新，但看着XML我不' t看到任何填充..也不能在網站上使用JS。我可以通過 – georoot

我想你必須內嵌你的SVG才能以這種方式工作。第二種方法是使用css過濾器或遮罩，但這有點困難。

來源

2017-06-15 09:23:04

如果你把CSS放在SVG中，它應該可以工作。你只是不能申請CSS交叉文件。 –

您必須爲懸停狀態指定fill。

svg#menu-button:hover{ 
    fill:red; 
    cursor:pointer; /*to change the cursor*/ 
    }

來源

2017-06-15 09:35:41

我的壞...問題是填充不工作...我刪除了懸停的CSS部分只是爲了保持代碼的精確:) – georoot

你可以發佈codepen/jsfiddle嗎？還要檢查你的svg代碼是否已經像這個'fill =「＃000」那樣指定了填充？ –

懸停時更改svg顏色？

回答

相關問題