悬停时重新调整菜单文本[关闭]答案

【问题标题】：Menu Text Re-Adjusting On Hover [closed]悬停时重新调整菜单文本[关闭]
【发布时间】：2015-03-26 22:13:54
【问题描述】：

我有一个站点，该站点的菜单在该部分中使用 :hover （最喜欢）。由于某种原因，文本似乎变得模糊并在悬停时恢复正常。跳跃文本或颜色变化是我可以解决的，因为我知道它的作用，但现在它变得模糊，像像素化....这里是 .menu 和 :hover 线，请寻求帮助：/

.menu a {
display: block;
color: #fff;
text-transform: uppercase;
text-decoration: none;
font-family: Arial;
font-size: 14px;
}        

.menu li:hover {
text-transform: uppercase;
font-family: Arial;
background-image: url(buttonbg.png);
font-size: 14px;
border: 1px solid #000000;

它不是 HOVER 边框的问题，在我嵌入该功能（边框）之前就存在问题

【问题讨论】：

可能是因为您的浏览器的背景图像和文本渲染。你使用的是什么浏览器？你有一个活生生的例子或小提琴吗？
Chome- 我发现添加 -webkit-backface-visability: hidden;消除闪烁但使子菜单按钮模糊，闪烁似乎来自文本的模糊并且它恢复正常，但我不知道如何在不模糊文本或禁用悬停标签的情况下停止它..我不能解决这些选项中的任何一个。我会尝试小提琴 - brb jsfiddle.net/rL6truu6 在这里，它也确实发生在小提琴上
当您使用“倾斜”时，浏览器在呈现它之前会遇到问题，直到它到达某个位置。我之前也遇到过这个问题，这个会根据字体改，试试不同的字体...
在尝试了几种不同的字体之后，在某些情况下它似乎不太明显，但仍然出现，我仍然可以捕捉到它......该网站的主题是 Diagonal 所以我不得不使用 SKEW ，并且计数器倾斜以检查文本：/有没有办法倾斜按钮并保持文本正常而无需输入另一个计数器值？示例按钮 { skew(25deg) } 文本 { skew(-25deg) } ?
我明白了，这是一个浏览器的问题，你需要消除文本的倾斜，例如在与文本相同的父级中添加一个
在 HTML 中并设置该框中的倾斜样式，在您的情况下不是那么语义但实用。

标签： css text menu hover

【解决方案1】：

感谢 Nima，我们找到了 2 种变通方法

1st - 将字体更改为渲染时间更短的字体，并将 CSS 上的转换时间减少到 0.1 秒或 0.2 秒。闪烁变得如此短暂以至于几乎看不到。

.submenu li {
transition: .1s ease-out transform;
}

.menu {
font-family: Sansation Light; }

2st - 通常使用 DIV 消除闪烁。单独为按钮创建一个 DIV，并从一般的倾斜中排除文本，这样它就不会来回移动。

这个没有代码，我用的是更快的解决方案。

【讨论】：