悬停效果工作在铬，但不工作在火狐

.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; 

}

我试图为thumbnail类添加悬停效果，我添加，但悬停只在Chrome浏览器，在Firefox中工作，它不工作，我不能弄清楚什么是错在这里悬停效果工作在铬，但不工作在火狐

来源

2013-11-26 Mehmet Eren Yener

对于Firefox，使用：

-moz-transition-delay: 1s;

有可用于流行的浏览器的几个不同的CSS供应商前缀，你可以在这里读到过： http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm

来源

2013-11-26 23:04:23

我怀疑问题在于你的负Z指数。

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

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

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

来源

2013-11-26 23:22:52 nullability

悬停效果工作在铬，但不工作在火狐

回答

相关问题