Question

我有一个侧边栏，其中有某些li元素作为索引，并且在每个li元素的悬停时，我有一个特定的图像出现在li元素之上（例如：{{1 }}）

假设我将鼠标悬停在第一个li元素上，并且翻转图像显示正常。但是，当悬停发生时，第一和第二元素之间的空间增加。我无法理解为什么会发生这种情况，我想阻止这种情况发生，即图像应该出现在position:relative;top:-25px;项目上，没有间距问题，只有一个简单的翻转。

以下是我所谈论的问题的一小部分：http://jsfiddle.net/PF35v/3/

Answer 1

添加“position：absolute;”到ul＃nav a：hover＃first_id + img正在停止推送LI（在Chrome上尝试过）。你试过这个吗？

Answer 2

在这种情况下，我会使用绝对定位，我通常在处理图像和顶部/侧面导航条时，这些导航条被“粘在”屏幕的一侧。或者，在我使用relative与absolute进行设置的情况下，我会使用一点作弊....这是我在上面的小提琴中改变的内容

 ul#nav a:hover+img {
 display: block;
 position:relative;
 top:-35px;
 margin-bottom:-48px;
 }

更新后的内容

http://jsfiddle.net/PF35v/9/

但是，如果您的图片尺寸不同，则需要单独设置top和margin-bottom定位。