悬停 svg 文件上的 CSS 不会出现

Question

在我的例子中，我有 2 个单独的 svg 图标文件。其中一个是白色，另一个是橙色。

这是图标的第一个状态。

.c-icon-not-favorite {
  background-image: url("../img/poster_fav_icon_white.svg");
}

这是悬停行为。

.c-icon-not-favorite:hover {
  background-image: url("../img/poster_fav_icon_orange.svg");
}

但是在悬停时橙色 svg 图标没有显示。我该怎么做才能解决这个问题。我正在寻找一段时间。我还没解决。

------ 编辑 -----

我通过向 .c-icon-not-favorite 类添加额外的属性解决了这个问题。属性是； 宽度，高度，position:absolute，顶部:0，右侧:1%。在那之后它完美地工作了。这太荒谬了。

感谢您的建议。

Answer 1

您的代码是正确的。问题很可能出在图像文件本身。

.c-icon-not-favorite {
  width: 100vw;
  height: 100vh;
  background-image:    url("https://upload.wikimedia.org/wikipedia/commons/6/67/Apollo_17_Image_Of_Earth_From_Space.jpeg");
  background-position: center;
  cursor: pointer;
}

.c-icon-not-favorite:hover {
  background-image:  url("http://www.publicdomainpictures.net/pictures/30000/velka/dandelion-133684137252N.jpg");
  }

<div class="c-icon-not-favorite"></div>