当我们将鼠标悬停在元素上并将其字体设置为粗体时如何避免抖动

Posted 2023-03-10

【中文标题】当我们将鼠标悬停在元素上并将其字体设置为粗体时如何避免抖动

【英文标题】：how can we avoid the shake when we hover over an element and set its font to be bold

【发布时间】：2010-09-28 15:29:17

【问题描述】：

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

http://jsfiddle.net/8v4Ag/

有没有避免晃动的技巧？假设我将鼠标悬停在 LogOff 上，字体变为粗体，但由于文本变粗，该行文本向右移动了一点。如果我们将鼠标悬停在远处，它会再次震动。

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

【参考方案1】：

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

她是an example

【参考方案2】：

一些想法

更简单：只需更改颜色（或背景颜色）；而不是黑色，您设置颜色：#333，悬停时：#000 - 这样文本大小不会改变。 绝对定位的小div 固定大小（宽度、高度），在您希望按钮/文本更改的位置具有较高的索引。当div 的大小发生一点变化时，不会影响邻居。此解决方案需要进行一些跨浏览器测试。

【参考方案3】：

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

【参考方案4】：

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

【参考方案5】：

如果摇动是指当您将鼠标悬停在另一个上时“帮助”或“注销”“框”会移动，那么您需要将“注销”和“帮助”框扩大到比粗体版本更大。

【参考方案6】：

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

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

【讨论】：

"添加边框以匹配现有背景" - 或使用transparent :)

如果您还更改边距/填充以适应差异，您将不会在边框上出现“抖动”。

【参考方案7】：

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

a 填充：10px;

a:hover 填充：8px;字体粗细：粗体；

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