删除示例的链接
问题:Webkit浏览器(Chrome和Safari)在我在页面上创建的轮换类出现问题。如果我删除内容div上的旋转类,则悬停时显示的大图像将显示在正确的位置。
Firefox对旋转的内容div没有任何问题。我在Mac上,所以我无法测试IE。
答案 0 :(得分:0)
您已经提供了.thumbnail
类position:relative
,因此它正在创建自己的位置上下文。您给定的固定位置.thumbnail:hover span
将使用它作为.thumbnail
父级顶部的0位置。
从position: relative
中删除.thumbnail
并将top
的{{1}}位置设置为您想要放置的值(现在,相对于窗口顶部,因为它有.thumbnail:hover span
。
希望我的解释足够清楚!
答案 1 :(得分:0)
首先,只能在.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;
}
位置应该相同。在您的代码中,您编写了绝对,但在悬停模式下设置了 fixed 。如果您希望图片显示在同一个位置,则应将其相对于 #portfolio 进行定位,而不是 .thumbnail 。所以添加以下内容:
#portfolio {position:relative}
删除
.thumbnail {position:relative}