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

How to magnify a pure CSS menu item when hovering using JS?

本文关键字：放大 CSS 菜单项悬停 JS 更新时间：2023-09-26

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

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

这容易做到吗？

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

您实际上并不需要JavaScript。CSS具有将仿射变换应用于元素的transform属性。只需做一些类似li:hover { transform: scale(1.2); }的事情。

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

我做了一个Fiddle来说明（包括所有的浏览器前缀版本，但我并没有在所有的浏览器中测试它，所以我可能在某个地方搞砸了）。

您最好的选择是在悬停时调整字体大小：

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

如果您在em中定义了所有内容，那么整个内容将进行调整。如果您想要缩放静态边距等，最好在CSS中重新定义它们，但也可以使用zoom或transform属性，正如Chuck所指出的。