如何在不扩大容器大小的情况下悬停显示div（li）？

I have an UL. Each LI element contains an image and a div element. The div element is supposed to be hidden and shows up when the user hovers over the image to display more information about the image. And I just want the div element to just overlay on top of the other li elements.

我有UL。每个LI元素包含一个图像和一个div元素。 div元素应该被隐藏,并在用户将鼠标悬停在图像上时显示,以显示有关图像的更多信息。我只想让div元素叠加在其他li元素之上。

The problem is when the div element is shown, it expands the size of the li element and pushes other li elements out of place. I figured out a solution to this by specifying the size of the li element to a specific size with px. However, I don't really want to do that because it's not good responsive design. When I use percentages, it does not work because the size of the UL element increases when the div element is shown, therefore, the size of li also increases automatically.

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

#list {
	list-style:none;
	overflow:initial;
	width:20%;
}
#list li {
	display:inline-block;
	float:left;
	overflow:visible;
}
.additionalInfo {
	position:relative;
	background-color:white;
	top:20px;
	left:40px;
	display:none;
 }
.clearer{
	clear:both;
}

<ul id="list">
<li class="listItem">
	<p>image here.....................</p>
	<div class="additionalInfo">
		<p>additional info</p>
		<p>additonal info</p>
	</div>
</li>
<li class="listItem">
	<p>image here.....................</p>
	<div class="additionalInfo">
		<p>additional info</p>
		<p>additonal info</p>
	</div>
</li>
<li class = ".clearer"></li>

Demo with image substituted with just plain text for simplicity.

为简单起见,使用纯文本替换图像的演示。

1 个解决方案

#1

You have the positioning wrong. First, your additionalInfo divs should have

你的定位错了。首先,你的additionalInfo div应该有

position: absolute;

and the containing li elements should have:

并且含有li元素应该具有:

position: relative;

That way it works. Here is the updated fiddle: https://jsfiddle.net/93pe7hdq/

这样就行了。这是更新的小提琴:https://jsfiddle.net/93pe7hdq/

#1