Javascript 如何悬停以显示div而不扩展容器（li）的大小？

我有UL证书。每个LI元素包含一个image和一个div元素。div元素应该是隐藏的，当用户将鼠标悬停在图像上以显示有关图像的更多信息时，它会显示出来。我只想让div元素覆盖在其他li元素之上

问题是，当显示div元素时，它会扩展li元素的大小，并将其他li元素推离原位。我通过使用px将li元素的大小指定为特定的大小，找到了解决方案。然而，我真的不想这样做，因为这不是一个好的响应性设计。当我使用百分比时，它不起作用，因为当显示div元素时UL元素的大小会增加，因此li的大小也会自动增加

#列表{
列表样式：无；
溢出：初始值；
宽度：20%；
}
#李列表{
显示：内联块；
浮动：左；
溢出：可见；
}
.其他信息{
位置：相对位置；
背景色：白色；
顶部：20px；
左：40px；
显示：无；
}
.更清楚{
明确：两者皆有；
}

图片在这里

附加信息

附加信息



图片在这里

附加信息

附加信息

您的定位错误。首先，您的

additionalInfo

div应该具有

position: absolute;

并且包含的

li

元素应具有：

position: relative;

这样就行了。以下是更新的小提琴：