我首先为SVG添加填充,然后再添加:悬停将其更改为其他颜色。它适用于除FireFox之外的所有浏览器(不了解IE)。
svg {
height: 25px;
width: 40px;
fill: #fff;
}
.facebook:hover {
fill: #3b5998;
}
当我删除svg的第一个填充时,它在FF中工作正常,但这显然不是解决方案。
任何想法如何解决?
答案 0 :(得分:1)
Firefox svg hover与< use>无效。
如果将路径放在svg元素中,它可以正常工作:
<svg class="facebook" viewBox="0 0 510 510">
<path d="M459 0H51C23 0 0 23 0 51v408c0 28.1 23 51 51 51h408c28.1 0 51-22.9 51-51V51C510 23 487.1 0 459 0zM433.5 51v76.5h-51c-15.3 0-25.5 10.2-25.5 25.5v51h76.5v76.5H357V459h-76.5V280.5h-51V204h51v-63.7C280.5 91.8 321.3 51 369.8 51H433.5z" />
</svg>