使用 :hover 增加链接的字体大小会导致 Firefox 闪烁。为啥？

Posted 2023-03-06

【中文标题】使用 :hover 增加链接的字体大小会导致 Firefox 闪烁。为啥？

【英文标题】：Increasing the font-size of a link using :hover causes a flicker in Firefox. Why?使用 :hover 增加链接的字体大小会导致 Firefox 闪烁。为什么？

【发布时间】：2011-12-15 05:54:24

【问题描述】：

有问题的问题可以在这里找到：http://www.test.terribleobject.com/breathing-stillness/

鼠标悬停时，菜单中的第三个链接会闪烁。我认为它与换行有关，因为这个菜单项太长了，但我现在找不到解决方案。

问题在 Chrome 中并不明显。

我使用的是 Mac 和最新的 FF。

这是css：

.menu-item a 
      background: none repeat scroll 0 0 #FEFEFE;
      border: 1px solid #103A02;
      border-radius: 5px 50px 5px 5px;
      font-family: 'IM Fell English SC';
      font-size: 1.3em;
      padding: 0 20px 0 10px;
      text-decoration: none;
      text-transform: lowercase;
    

    .menu-item a:hover 
      background: #999;
      color: #fefefe;
      padding-left: 15px;
      font-size: 1.4em;
    

感谢您的帮助。我感觉答案很明显。

【问题讨论】：

gah XD 你一直在改变它。 XD 你能回到他们有不同宽度的地方吗？

抱歉，没想到大家这么快就回复了！

【参考方案1】：

悬停时不要更改字体大小，而是更改颜色。鼠标悬停时整个部分放大

【讨论】：

谢谢。但我正在寻找一种技术解决方案，而不是美学上的改变。

【参考方案2】：

悬停时菜单项不够大，无法容纳文本。

你应该

增加菜单项的width 减少font-size 的变化（比如从1.4em 到1.35em） 添加权限margin

更好的是，您应该放弃 font-size 更改，而只更改 background-color 和文本颜色。

仅供参考，我在 Chrome 中对此进行了测试，它也破坏了布局。

【参考方案3】：

闪烁几乎肯定来自不同字体大小触发/取消触发:hover 效果的事实。我建议你不要在悬停时更改字体大小，而要进行更细微的更改，例如粗体或颜色更改