css - 悬停时更改 SVG 不起作用

Question

这是正确的吗 way去做？

HTML

<img src="http://svgur.com/i/6FY.svg" alt="" class="bullet"><img src="http://svgur.com/i/6FY.svg" alt="" class="bullet"><img src="http://svgur.com/i/6FY.svg" alt="" class="bullet"><img src="http://svgur.com/i/6FY.svg" alt="" class="bullet"><img src="http://svgur.com/i/6FY.svg" alt="" class="bullet">
<img src="http://svgur.com/i/6FY.svg" alt="" class="bullet">

CSS

.bullet {
    width: 5em;
    padding: 0.2em;
    margin: 0.2em;
}

.bullet:hover {
    content: url('http://svgur.com/i/6F0.svg');
    width: 5em;
    padding: 0.2em;
    margin: 0.2em;
}

在 Codepen 上可以，但不能在本地使用，如果我将它上传到我自己的服务器上也不能。我上传到BitBalloon而且它也不起作用。

我应该如何处理这个问题？谢谢:)

Answer 1

使用 svg 作为背景，它将在所有浏览器中正常工作。不要依赖 content 方法，因为它并非在任何地方都受支持(它不适用于 Firefox)

.bullet {
  width: 5em;
  height: 5em;
  display: inline-block;
  padding: 0.2em;
  margin: 0.2em;
  background-image: url(http://svgur.com/i/6FY.svg);
  background-size: cover;
}

.bullet:hover {
  background-image: url('http://svgur.com/i/6F0.svg');
}

<span class="bullet"> </span>