当我们将鼠标悬停在一个元素上并将其字体设置为粗体时，我们如何避免抖动？这是我编写的代码示例：
有没有避免摇晃的技巧？假设我将鼠标悬停在 LogOff 上，字体变为粗体，但由于文本变粗，该行文本向右移动了一点。如果我们将鼠标悬停在远处，它会再次震动。
有没有任何 CSS 方法可以避免这种震动？
问问题
6635 次
7 回答
5
我通过使用带有悬停样式的不可见重复文本解决了这个问题。使用 visibility:hidden 而不是 display:none 使其占用空间，并将其放置在原始文本下方。这个不可见的元素将确保文本足够宽以适应悬停状态。
她就是一个例子
于 2010-09-28T16:06:34.957 回答
2
一些想法
- 更简单：只需更改颜色（或背景颜色）；而不是黑色，您设置颜色：#333，当悬停时：#000 - 这样文本大小不会改变。
- 一个小的绝对定位的固定大小（宽度，高度），在您希望按钮/文本更改的位置
div具有更高的索引。当大小div改变一点时，它不会影响邻居。此解决方案需要一些跨浏览器测试。
于 2010-09-28T15:38:49.160 回答
2
我不确定您所说的“摇动”是什么意思，当我在悬停时将文本加粗时，我遇到了同样的按钮变大的问题。我想我最终通过改变设计来“解决”它，所以它不需要在悬停时加粗。@ring0 的第二个解决方案可能有效，但实施起来会很痛苦。我建议使用他的第一个建议，您甚至可以添加在悬停时会更改的背景图像（可能是渐变），并更改字体颜色。
于 2010-09-28T15:46:07.487 回答
1
如果通过摇晃，您的意思是当您将鼠标悬停在另一个上时“帮助”或“注销”“框”会移动，那么您需要将“注销”和“帮助”框扩大到比粗体版本更大。
于 2010-09-28T15:36:47.650 回答
1
如果您决定使用 BOLD 进行悬停，您将无法避免此问题。粗体和普通字体是不同的字体，因此它们不会像您想要的那样完美对齐，您会看到这种视觉效果。如果您使用的是支持它的浏览器，或许可以尝试text-shadow:在悬停时添加样式。或者color:从灰色变成黑色...
于 2010-09-28T16:10:10.507 回答
0
您可以设置固定宽度；但是，我建议不要在项目上使用强烈的样式。我也不建议简单地更改颜色，因为这并不能解决色盲人士的任何可访问性问题。如果您只是添加一个边框并使背景更暗，那应该可以解决问题并且是最兼容的跨浏览器。
请记住，如果您只是添加边框，您将获得相同的“抖动行为”，因此请务必添加边框以匹配现有背景，然后在悬停时更改边框颜色。
于 2010-09-28T16:19:17.417 回答
0
我认为这样的事情可能会做到：
一个{填充：10px；}
一：悬停{填充：8px；字体粗细：粗体；}
根据您的原始字体大小和行高设置为相同的 px 值
于 2010-11-26T23:00:35.813 回答