Change SVG on hover does not work

Question

Is this the correct way to do it?

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 is works, but not locally and also not if I upload it onto my own server. I uploaded it to BitBalloon and it also does not work.

How should I approach this? Thanks :)

Answer 1

Use the svg as background and it will work fine within all the browser. Don't rely on the content method as it's not supported everywhere (it won't work with 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

The problem is with your URL. The browser tries to load the hover image from /css/images/bullet_closed.svg, same location where the css file is loaded from. So it returns 404.

Add another / before the url

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

or add the full URL

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

---

EDIT

It seems this approach doesn't work with FireFox. Read this post for more information. I suggest you move along with javascript in order to achieve this.

How ever FireFox also gives the 404 for the bullet_closed.svg, so follow the above guideline as well.