避免“CSS抖动”

能力越大，责任越大。

CSS 允许您控制的其中一项内容是许多对象的悬停状态，最显著的是锚 (<a>) 元素。通常，悬停状态通过颜色变化来设置样式，或者可能是更花哨一点的东西，比如背景图像更改（或关于 CSS 精灵 的背景位置更改）。

但这并不是您可以更改的所有内容。同样轻松地，您可以更改字体粗细、边距、填充，或者如果您正在处理块级元素，则可以更改高度和宽度。在悬停时更改任何这些内容都进入了**危险区域**。

为什么危险？因为您正在更改元素的可点击区域。如果新的可点击区域的位置导致光标落在其外部，则悬停事件将触发关闭并恢复到其默认样式，这将再次更改可点击区域，这将导致您的光标再次位于其中，这将再次更改样式，这将……。您明白了，“CSS抖动”。

“CSS抖动”可能在您在悬停时更改对象大小时随时发生。

就这么简单。如果您想避免 CSS 抖动，请不要以任何方式设置对象的悬停状态以更改大小。

在某些情况下，更改大小是安全的。基本上，如果可点击区域**在所有方向上都变得更大**。例如，在悬停时加粗文本。由于加粗会导致对象在所有方向上都变大，因此您永远不会触发抖动。但是，如果您执行相反的操作，即在悬停时取消加粗文本，则可点击区域将变小，并且几乎肯定会触发抖动。

以下是一些可能触发“CSS抖动”的悬停样式

• 加粗/取消加粗文本
• 更改边距或填充
• 更改边框大小
• 更改宽度或高度
• 更改行高

看看 CSS 抖动侠。

好吧，这真的很蠢，但为了准确说明我所说的内容，我创建了 CSS 抖动侠。抖动侠是一个锚元素，默认情况下宽度为 246px，但在悬停时，它会缩小到 212px 宽。因此，如果您从右侧或左侧将鼠标移到抖动侠上，它将缩小。这会导致可点击区域缩小，从而使您的鼠标位于其外部，它将再次变大……从而导致抖动。查看示例

这并不是什么大规模的流行病，它只是需要注意的一件事。它很可能以更微妙的方式出现，这实际上是我最初获得这个想法的地方。我曾使用锚元素的 border-bottom，以便在底划线之前在底部提供一些填充。然后在悬停时，我将该填充减少了一个像素，因此底划线似乎向上跳动了一点，这是一个不错的效果。但这导致了一个像素区域，CSS 抖动将在那里发生。不好。最终，我为悬停选择了另一种方法。