使 a:hover 缩小 img

Question

我的按钮链接只是 html 中的链接和 css 中的背景图片。在 CSS 中，我还有图像的尺寸，以便显示整个图像。

我希望当鼠标悬停在图像上时图像缩小到 95%。我有 a:hover css 但将尺寸更改为 95% 并没有这样做。

有没有简单的方法来做到这一点？

您可以在 http://granthoneymoon.com/temp.html 查看示例页面，导航按钮位于页眉内的顶部。

Answer 1

这应该有效：

a { transition: transform 0.5s; }
a:hover { transform: scale(0.95); }

您可以将 0.5 更改为最适合您的时间。此外，您还需要为旧版浏览器添加特定的 -webkit-、-moz- 和 -o- 前缀。

making a:hover shrink the img