制作 a:hover 缩小 img

Posted 2023-05-08

【中文标题】制作 a:hover 缩小 img

【英文标题】：making a:hover shrink the img

【发布时间】：2015-03-29 07:14:35

【问题描述】：

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

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

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

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

【参考方案1】：

这应该可行：

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

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

【讨论】：

transform 0.5s有什么作用？

我把它放进去，就像你有它一样，我看不出有什么变化。 :-/

0.5s 是它将执行转换的时间量，在当前情况下意味着“半秒”。例如 1.0s 是 1 秒。

我喜欢你去那里的样子，但是如果你在链接类中有背景 img 怎么办？