html - 防止悬停时元素之间的空间增加

Question

我有一个侧边栏，其中有某些li元素作为索引，并且在每个 li 元素悬停时，我有一个特定的图像出现在 li 元素上（例如position:relative;top:-25px;：）

假设我将鼠标悬停在第一个 li 元素上，并且翻转图像看起来很好。但是，当发生这种悬停时，第一个和第二个元素之间的空间会增加。我无法理解为什么会发生这种情况，我想阻止这种情况发生，即图像应该出现在li项目上而没有间距问题，而只是一个简单的翻转。

这是我正在谈论的问题的一个小提琴：http: //jsfiddle.net/PF35v/3/

score 0 · Accepted Answer

添加“位置：绝对；” 到 ul#nav a:hover#first_id+img 正在停止 LI 被向下推（在 Chrome 上尝试过）。你试过这个吗？

score 0 · Accepted Answer

在这种情况下，我会使用绝对定位，我通常在处理“粘合”到屏幕一侧的图像和顶部/侧面导航栏时使用。或者，在我打算使用relativevs.absolute我使用一点作弊的情况下……这是我在上面的小提琴中所做的更改

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

更新的小提琴

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

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

2 回答 2