悬停在每个链接上的悬停宽度变化

Question

正如话题所说。我希望被徘徊的人改变他的width。但似乎每个列表元素都会更改其width。

Fiddle

它似乎很容易，但我不明白。有什么建议吗？

修改：当您将width上的#nav li a:hover {更改为background-color: #555;时 它工作正常。现在真的很困惑。

Answer 1

它不会影响其他元素，只是移动它们。的 See this

---

解决方案：添加margin-left: -30px;。这将解决其他因素 为什么30px？ 30px是旧宽度和新宽度之间的差异（90和120px）。

#nav li a:hover {
    width: 120px;
    margin-left: -30px;
}

现场演示：jsFiddle

Answer 2

看看这里实际发生了什么：宽度只在当前链接上更改，而不是在所有链接上更改：http://jsfiddle.net/JjMfU/15/

你需要解决一个不同的问题 - 只需要右侧的链接 - 这是通过将它们浮动到右边来完成的。注意我在overflow: hidden上添加li来处理浮点数，其他方法也存在。

像这样：http://jsfiddle.net/JjMfU/20/