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

【问题标题】：CSS on hover svg file won't appear悬停svg文件上的CSS不会出现
【发布时间】：2017-10-02 17:23:57
【问题描述】：

就我而言，我有 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%。之后它完美地工作了。这太荒谬了。

感谢您的建议。

【问题讨论】：

请在说明问题的问题中添加minimal reproducible example。
您确定您的图片链接有效吗？
@RobertLongson 对不起。是我们公司的一个内建项目。它正在本地服务器上运行。因此，为了演示而重现需要很长时间。真的很抱歉。
@AnuragDaolagajao 是的，链接正常，我检查了 2 或 3 次。

标签： css svg background-image

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

.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");
  }

&lt;div class="c-icon-not-favorite"&gt;&lt;/div&gt;

【讨论】：