1

示例链接已删除

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

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

4

2 回答 2

0

你已经给了这个.thumbnail类position:relative，所以它正在创建它自己的位置上下文。您给出的固定位置.thumbnail:hover span将使用它的 0 顶部位置作为.thumbnail父级的顶部。

只需取走并将位置设置为position: relative您想要放置的值（相对于现在，相对于窗口的顶部，因为它具有..thumbnailtop.thumbnail:hover spanposition: fixed

希望我的解释足够清楚！

于 2012-05-29T07:15:38.237 回答
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; 
}

位置应该是一样的。在您的代码中，您编写了absolute但在悬停模式下设置了fixed。如果您希望图像出现在同一位置，则应将其相对于#portfolio而不是.thumbnail 定位。所以添加这些：

#portfolio {position:relative}

消除

.thumbnail {position:relative}
于 2012-05-29T07:19:28.737 回答