悬停时更改 SVG 不起作用

Question

这是正确的方法吗？

.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>

Answer 2

问题出在您的网址上。浏览器尝试从/css/images/bullet_closed.svg加载悬停图像，与加载css文件的位置相同。所以它返回 404。

在网址前添加另一个/

content: url('/images/bullet_closed.svg');

或添加完整网址

.bullet {
	width: 0.8em;
	padding: 0.2em;
    margin: 0.2em;
}
.bullet:hover {
	content: url('http://youthful-liskov-f16b89.bitballoon.com/images/bullet_closed.svg');
	width: 0.8em;
	padding: 0.2em;
  margin: 0.2em;
}

<img src="http://youthful-liskov-f16b89.bitballoon.com/images/bullet_open.svg" class="bullet">
<img src="http://youthful-liskov-f16b89.bitballoon.com/images/bullet_open.svg" class="bullet">
<img src="http://youthful-liskov-f16b89.bitballoon.com/images/bullet_open.svg" class="bullet">

---

编辑

这种方法似乎不适用于FireFox。阅读这篇文章以获取更多信息。我建议你继续使用javascript来实现这一点。

火狐也为bullet_closed.svg提供404，所以也要遵循上述准则。