Question

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

问题是当显示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

Answer 1

您的定位错误。首先，您的additionalInfo div应该有

position: absolute;

并且包含li个元素应该具有：

position: relative;

这种方式有效。这是更新的小提琴：https://jsfiddle.net/93pe7hdq/

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

1 个答案: