Question

.thumbnail{
position: relative;
z-index: -99;
height:125px;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
    position: absolute;
    background-color: #512C1D;
    padding: 10px 0px 0 10px;
    border: 0px solid gray;
    visibility: hidden;
    color: black;
    text-decoration: none;
    text-shadow:none;
    height:210px;
}

.thumbnail span img{ /*CSS for enlarged image*/
border: 1px solid #512C1D;
padding: 0px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -20%;
left: -35%; /*position where enlarged image should offset horizontally */
transition-delay: 1s;
-webkit-transition-delay: 1s; 

}

我正在尝试为缩略图类添加悬停效果，但我添加了，但悬停仅适用于Chrome浏览器，在Firefox中它无效，我无法弄清楚这里有什么问题

Answer 1

对于Firefox，请使用：

-moz-transition-delay: 1s;

流行的浏览器有一些不同的CSS供应商前缀，你可以在这里阅读它们： http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm

Answer 2

我怀疑问题出在你的负z-index上。

否定的z-index会阻止您的.thumbnail获得悬停状态，因为它会堆叠在您网页上的其他元素下方。它可能仍然可见，但鼠标事件无法访问它。我创建了一个简化的小提琴来说明问题：http://jsfiddle.net/t3vg2/（注意第二个缩略图有一个自动z-index。）

要解决此问题，您应该重新考虑设置负z-index的原因。尝试在始终可用的父元素上使用悬停状态。例如，如果您的.thumbnail位于div内，则样式基于div的悬停状态而不是缩略图。或者，如果您只想隐藏/显示缩略图，请使用opacity而不是z-index。

我看到Chrome和Firefox处理z索引的方式存在差异，所以这可以解释为什么它可以在Chrome中运行而不是Firefox。

悬停效果在Chrome中有效，但在Firefox中不起作用

2 个答案: