css - Firefox 中的响应式翻转图像

Question

好的，我在页面中有一个图像网格。我将它们作为单个图像放入，将每个链接到另一个页面的 URL，为每个图像 div 分配自己的类，然后为每个类添加 CSS 样式以进行翻转。此代码适用于 Chrome 和 Safari:

.advertising a:hover {
content: url('image1');
z-index: 1;
width: 100%;
position: relative;
height: auto;
opacity: 1;
}

它在 Firefox 中不起作用，但是(根本没有翻转)。这在 Firefox 中有点有效:

@-moz-document url-prefix() {
.advertising a:hover:before{
content: url('image2');
width: 100%;
position: relative;
height: auto;
opacity: 1;
 z-index: 1;
}}

它的工作原理是发生翻转，但新图像没有响应，而是显示在原始图像上方而不是在原始图像之上。

帮助？我是一个 CSS 新手，正在尝试自己解决这个问题，因此非常感谢任何帮助。

Answer 1

发生这种情况是因为您不能在 FireFox 中使用 CSS 向非伪(:before, :after)元素提供内容。您的编码将以其他方式工作。你可以这样做:

.advertising a{
width:250px;
height:250px;
background:url('http://lorempizza.com/250/250');
display:block;
}
.advertising a:hover {
background:url('http://lorempixel.com/250/250')
z-index: 1;
opacity: 1;
}

JSFiddle Demo