Can't replace image on hover

Question

This never happened to me before, and i can't figure our why the hover happens, but the back image won't change :

<div class="settings" id="settings" style="background-image:url(assets/settings.svg);"></div>

.settings{
  width: 2.0vw;
  height: 2.0vw;
  margin-top: calc((8vh - 2vw)/2);
  margin-left: 1.5vw;
  float: left;
  background-position: center;
  background-size: contain;
}
.settings:hover{
  background-image: url("assets/settingsH.svg");
}

To prove that the image is there, if i set assets/settingsH.svg in the html - it will show the hover image.

If i change size on hover, it will also work (hover is happening) but back image won't change no matter what.

No other hidden settings class was found.

Does this answer your question? [Changing image on hover with CSS/HTML](https://stackoverflow.com/questions/18813299/changing-image-on-hover-with-css-html) — Grzegorz T., Jul 01 '20 at 20:11

score 4 · Accepted Answer · edited Jul 01 '20 at 20:24

That's because you put the background image inline with html, so if you want to replace it via css, you must put an !important:

.settings:hover{
    background-image: url("assets/settingsH.svg")!important;
}

or bettter, put the background in css:

.settings {
  width: 2.0vw;
  height: 2.0vw;
  margin-top: calc((8vh - 2vw) / 2);
  margin-left: 1.5vw;
  float: left;
  background-position: center;
  background-size: contain;
  background-image: url("https://via.placeholder.com/400/0000FF");
}

.settings:hover {
  background-image: url("https://via.placeholder.com/400/FF0000");
}

<div class="settings" id="settings"></div>

Can't replace image on hover

1 Answers1