html - SVG 悬停填充在 FireFox 中不起作用

标签 html css svg

我首先为 SVG 添加填充,然后在 :hover 上将其更改为另一种颜色。它适用于除 FireFox 之外的所有浏览器(不知道 IE)。

svg {
  height: 25px;
  width: 40px;
  fill: #fff;
}
.facebook:hover {
  fill: #3b5998;
}

当我删除 svg 的第一个填充时,它在 FF 中工作正常,但这显然不是解决方案。

有什么解决办法吗?

这是一支笔 http://codepen.io/shatkovski/pen/aZzmJJ?editors=1100

最佳答案

Firefox svg hover 不适用于

如果将路径放在 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>

关于html - SVG 悬停填充在 FireFox 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37575731/

相关文章:

html - 使用定义列表的伪表

javascript - 如何检测 CSS 值何时更改?

javascript - 工具提示未显示在 d3 图表中点/圆顶部的附加 'rect' 处

html - 在 Firefox 中带有基本 href 的 SVG 掩码

html - x86 汇编 DIV 素数分解

javascript - 将 CSS 和 HTML 汉堡菜单转换为 React 组件

javascript - 横幅旋转图像。单击时每个图像都会发送到不同的 URL(vanilla javascript)

javascript - jQuery Raty 为分数加注星标。移动版

html - 在 vBulletin 论坛上,CSS FlexBox 没有在 IE 中水平居中

javascript - 使用 d3.behavior.zoom 平移/缩放到特定组 ID/getBBox()