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为无伪（（之前，之后）元素提供内容。否则你的编码会起作用。你可以这样做：

.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

Firefox中的响应翻转图像

1 个答案: