当我们将鼠标悬停在元素上并将其字体设置为粗体时，我们怎样才能避免震动

Question

当我们将鼠标悬停在元素上并将其字体设置为粗体时，我们如何避免震动？以下是我写的代码示例：

http://jsfiddle.net/8v4Ag/

是否有避免晃动的技术？假设我将鼠标悬停在LogOff上，字体变为粗体，但由于文本变得粗壮，该行文本会向右移动一点。如果我们再次徘徊，它会再次震动。

有没有CSS方法可以避免这种震动？

Answer 1

我通过使用悬停样式的不可见重复文本解决了这个问题。使用visibility：hidden而不是display：none来占用空间，并将其放在原始文本下面。这个不可见的元素将确保文本对于悬停状态足够宽。

她是an example

Answer 2

一些想法

• 更容易：只需更改颜色（或背景颜色）;而不是黑色，你设置颜色：＃333，并在悬停时：＃000 - 这样文本大小不会改变。
• 一个小的绝对定位div固定大小（宽度，高度），在您希望按钮/文本更改的位置具有更高的索引。当div的大小稍微改变时，它不会影响邻居。此解决方案需要一些跨浏览器测试。

Answer 3

我不确定“摇晃”是什么意思，当我悬停文本时，我遇到了相同的按钮变大问题。我想我最终通过改变设计来“解决”它，所以它不需要大胆的悬停。 @ ring0的第二个解决方案可能会起作用，但实施起来会很麻烦。我建议使用他的第一个建议，你甚至可以添加在悬停时会改变的背景图像（可能是渐变），并改变字体颜色。

Answer 4

如果通过摇晃，你的意思是当你将鼠标悬停在另一个上时，帮助或LogOff“框”会移动，那么你需要将LogOff和Help框扩大到比粗体版更大的颜色。

Answer 5

如果您决定使用BOLD进行悬停，则无法避免此问题。粗体和普通字体是不同的字体，因此它们不会像您想要的那样完美对齐，您将看到这种视觉效果。如果您使用的是支持它的浏览器，请尝试在悬停时添加text-shadow:样式。或者将color:从灰色变为黑色......

Answer 6

您可以设置固定宽度;但是，我建议不要在项目上使用强大的样式。我也不建议只是改变颜色，因为这并没有解决任何色盲人员的可访问性问题。如果你只是添加一个边框并使背景更暗，那应该是技巧，并且是最兼容的跨浏览器。

请注意，如果您只是添加边框，则会获得相同的“摇晃行为”，因此请务必先添加边框以匹配现有背景，然后在悬停时更改边框的颜色。

Answer 7

我认为这样的事情可能会这样做：

a {padding：10px; }

a：悬停{padding：8px;字体重量：粗体; }

取决于您的原始字体大小＆amp; line-height设置为相同的px值