每个链接都会在悬停时改变宽度，不仅限于当前悬停的链接

Question

正如题目所述，我希望在鼠标悬停时更改被悬停元素的width。但似乎每个列表项都更改了其width。 戳这里查看示例代码。

似乎很简单，但我不明白。有什么建议吗？ 编辑：当您将#nav li a:hover {中的width更改为background-color: #555;，它就正常工作了。现在真的很困惑。

- Denny Mueller

Answer 1

它不会影响其他元素，只是移动它们。查看此处。

---

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

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

现场演示：jsFiddle

- Nikola K.

---

我会说这只是一个解决方法，而不是真正的解决方案... 如果用户更改了任何宽度，他们将不得不重新计算。有点不太严肃 :) - skip405

Answer 2

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

您需要解决一个不同的问题-始终将链接放在右侧，这可以通过将它们浮动到右侧来完成。请注意，我添加了overflow: hidden在li上处理浮动，还有其他方法。

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

- skip405