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类添加额外属性解决了这个问题。属性是; width, height, position: absolute, top:0, right: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>

Answer 2

将带有svg的img标签放在带有类的div标签内。在悬停div标签时，隐藏img标签并显示背景图像。默认情况下，使用SVG显示img标记。

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

2 个答案: