CSS：悬停内容网址选择器适用于Chrome，但不适用于任何其他浏览器

Question

我设置了这个简单的悬停效果，以便在悬停时在Instagram图像上显示心形图像。我的客户INSISTS有它。我认为这一切都很有效，因为我在Chrome上，但是当检查其他浏览器时，它除了chrome之外什么都不起作用。对我的错误提出任何建议都会很棒。我已经阅读了类似的文章并尝试了一些解决方案但没有任何效果

在页面底部，将鼠标悬停在Instagram插件上以查看问题： http://eddieross.moderndesignmedia.net/

CSS：

.owl-item .box a.swipebox:hover {
content: url("http://eddieross.moderndesignmedia.net/wp-content/uploads/2015/08/instagram-33.png") !important;
height: 223px;
width: 223px;
z-index: 100;
display:inline;
}

Answer 1

这是一个类似的问题，解决了与您相同的问题。我建议你查看给出的前两个答案，也许他们会为你工作。 Hover CSS only working in Chrome

Answer 2

我找到了解决方案，以防其他人遇到问题。

https://css-tricks.com/css-content/

我补充说：在我的代码之前，它适用于所有浏览器。内容：url命令显然只适用于：before和：after。

.owl-item .box a.swipebox:hover:before {
 content: url("http://eddieross.moderndesignmedia.net/wp-content/uploads/2015/08/instagram-33.png") !important;
z-index: 100;
display:inline;
width:100%;
height: 100%;
}