Question

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

这些<li>包含图像，因此效果是许多缩略图大小的图像彼此相邻。

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

这个div的样式显示在图像上方，偏移50px和顶部-200px（想象工具提示样式定位和显示）。

#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>的容器。

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

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

Answer 1

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

如何使hover状态div相对于个人<li>而不是</li> <li>容器？</li>

1 个答案: