html - 使用 :hover 时如何将 div 与 div 重叠？

Question

我一直在网上搜索，我找不到任何东西。

我有这三个 div，当我将鼠标悬停在第一个或第二个 div 上时，它会移动下面的 div。我希望 div 重叠而不是移动它。

我的 html 代码如下所示：

<div class="test">First
    <div>
        IP: 0.0.0.0<br>
        LOCATION: Place<br>
    </div>
</div>

<class="test">Second
    <div>
        IP: 0.0.0.0<br>
        LOCATION: Place<br>
    </div>
</div>

<div class="test">Third
    <div>
        IP: 0.0.0.0<br>
        LOCATION: Place<br>
    </div>
</div>

还有我的 CSS 代码：

.test{
background-color:green;
text-align:center;
border:1px solid black;
margin:5px;
padding:5px;
width:100px;
font-family:Courier;
}

.test div{
display:none;
text-align:left;
}

.test:hover div{
display:block;
word-wrap: break-word;
}

Answer 1

您必须使用position:absolute;并给要显示重叠的 div 一个绝对位置。

.test div{
display:none;
position: absolute;
top: ...px;
left: ..px;
text-align:left;
}