悬停时更改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颜色？

回答

相关问题