0

我有几个<li>具有该display: inline属性的，因此它们彼此相邻排列。

这些<li>包含图像，因此效果是很多缩略图大小的图像并排排列。

将鼠标悬停在图像上时，我设置了一个显示隐藏 div 内容的 css 属性。

这个 div 有样式并出现在图像上方，向左偏移 50 像素和顶部 -200 像素（想想工具提示样式的定位和显示）。 

#information {
    display: none;
}

ul li:hover #information {
    display:block;
    position: absolute;
    background:#FFFFFF;
    color: #000000;
    border: 1px solid #CCCCCC;
    width: 190px;
    height: 250px;
    left: 50px;
    top: -200px;
    overflow: hidden;
}

我想要的行为是悬停状态 div 偏移量是相对于图像，即个人<li>。

我目前的行为是悬停状态 div 偏移量相对于所有<li>'s 的容器。

在上面的代码示例中，您可以看到悬停状态 div 位置是绝对的，我确实将位置设置为相对，但是当悬停时这会导致其他<li>人改变他们的位置（这可能是因为悬停状态 div 必须有一个display: block属性来更改原始display: hidden属性）并且悬停状态 div 仍然相对于容器而不是个人显示<li>。当我将位置设置为绝对位置时，<li>它们会保留它们的位置。

所以我的问题是我如何使悬停状态 div 相对于个人<li>而不是容器的偏移<li>。

4

1 回答 1

1

解决方案是在 ul li 中添加 a position: relative，在悬停状态 div 中添加 2 的 z-index。

于 2012-11-12T02:35:09.833 回答