嘿，这个hover时页面闪烁的问题我之前也碰到过，其实根源很容易找到：

问题原因 #

你在<a>标签的hover状态里新增了padding: 1vmax，这会导致元素在hover前后的尺寸发生突变——未hover时没有这个内边距，hover瞬间元素宽高变大，浏览器不得不立刻重新计算页面布局（也就是重排/回流）。这个反复触发的布局计算过程，反映在视觉上就是你看到的闪烁。

看你的代码片段：

a:hover { background-color: #2c3e50; padding: 1vmax;}

当鼠标悬停上去，<a>元素突然“膨胀”，挤压周围空间或者自身位置偏移，浏览器需要实时重新渲染这部分区域，自然就会出现闪烁。

修复方案 #

这里有几个实用的修复方法，你可以根据自己的需求选：

方案1：提前给<a>设置相同padding（最推荐） #

让元素在hover前后的尺寸保持一致，从根源上避免重排：

ul li a {
  color:rgb(23,123,177);
  text-decoration: none;
  margin-left:5vmax;
  font-size:1.3vmax;
  /* 新增：提前设置和hover状态一致的padding */
  padding: 1vmax;
  /* 加个过渡动画，让hover效果更丝滑 */
  transition: background-color 0.2s ease;
}
a:hover { 
  background-color: #2c3e50; 
  /* 这里不需要再加padding了，已经提前设置好 */
}

这样hover时只有背景色变化，元素尺寸完全不变，浏览器不用重新计算布局，闪烁问题直接解决，还能提升交互体验。

方案2：用outline代替padding实现高亮 #

如果你不想改变元素的默认占位，可以用outline——它不会占据布局空间，也就不会触发重排：

a:hover { 
  background-color: #2c3e50; 
  /* 用透明outline模拟padding的视觉效果 */
  outline: 1vmax solid transparent;
  /* 让outline和元素内容贴合 */
  outline-offset: -1vmax;
}

这个方法的视觉效果和padding略有差异，你可以调整outline-offset的值来适配你的需求。

方案3：用transform实现视觉高亮（性能友好） #

如果只是想要hover时的高亮效果，也可以用transform: scale()，因为transform只会触发重绘而不是重排，性能更好：

ul li a {
  /* 其他样式不变，需要设置display为inline-block才能用transform */
  display: inline-block;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
a:hover { 
  background-color: #2c3e50; 
  /* 轻微放大元素，实现高亮效果 */
  transform: scale(1.05);
}

这个方法不会改变元素的实际占位，同样能解决闪烁问题，还能带来更灵动的交互感。

内容的提问来源于stack exchange，提问作者user9356960