CSS图片悬停 - 在Firefox网页工具包问题/做工精细

Question

链接例子删除

问题：Webkit的浏览器（Chrome和Safari），正与我的页面上创建的旋转类的问题。如果我删除内容div上的旋转类，则悬停时出现的大图像显示在正确的位置。

Firefox对旋转的内容div没有任何问题。我在Mac上，所以我无法测试IE。

Answer 1

您已经给.thumbnail类position:relative，所以它创建了它自己的位置上下文。您给出的固定职位.thumbnail:hover span将作为.thumbnail父母的顶部，将其作为0顶部职位。

就拿走position: relative从.thumbnail，并为.thumbnail:hover span，以价值top位置，你希望它放置（相对于现在，在窗口的顶部，因为它有position: fixed。

希望我的解释是很清晰！

Answer 2

首先，它是enaugh只设置在.thumbnail:hover span{visibility:visible} 其余的代码应该是这样的

.thumbnail span { 
    position: absolute; 
    padding: 0px; 
    visibility: hidden; 
    color: black; 
    text-decoration: none; 
    height:530px; 
    overflow: hidden; 
    top: 0; 
    left: 460px; 
} 

这个位置应该是一样的。在您的代码中，您写下了绝对但悬停模式设置为固定为。如果你想要的形象出现在同一个地方，你应该放置它相对于#portfolio但不.thumbnail。所以，添加这些：

#portfolio {position:relative} 

删除

.thumbnail {position:relative}