使用JS悬停时如何放大纯CSS菜单项？

Question

我有一个纯CSS菜单，想提供一些视觉反馈。当光标经过一个项目时，我希望它放大到正常大小的110％或120％。

我只是在无序列表中使用文本，没有图像。

这可以轻松完成吗？

---

更新：MS IE 7+（其他任何东西都是奖金＆amp;可能是免费的）

Answer 1

你真的不需要JavaScript。 CSS具有transform属性，可将仿射变换应用于元素。只需执行li:hover { transform: scale(1.2); }之类的操作即可。

适用于所有最新版本的Safari和Firefox，以及IE 9及更新版本 - 如果您对JavaScript解决方案持开放态度，Transformie会增加对6+的支持。

我制作了一个Fiddle to illustrate（包括所有浏览器前缀版本，但我实际上并没有在所有浏览器中对它进行测试，所以我可能在某个地方搞错了。）

Answer 2

最好的办法是在悬停时调整字体大小：

li:hover {
    font-size : 1.2em;
}

如果您已在em中定义了所有内容，则整个内容都会进行调整。如果你想要扩展静态边距/等，你最好只重新定义CSS中的那些，但你也可以使用Chuck所指出的zoom或transform属性。 / p>