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;
}

On 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文件的同一位置/css/images/bullet_closed.svg加载悬停图像。所以它返回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。有关详细信息，请阅读this post。我建议你继续使用javascript来实现这一目标。

FireFox如何为bullet_closed.svg提供404，所以也请遵循上述指南。

在悬停时更改SVG不起作用

2 个答案: