移动问题：transform: scale() resizes image when clicked

Question

我有 4 个社交图​​标，它们的变换 属性 悬停时值为 scale(1.5)。

    .social-icon
        margin: 0 20px
        transition: scale 200ms ease-in-out

        &:hover
            transform: scale(1.5)

悬停效果在桌面上按预期工作，但在移动屏幕上单击社交图标会使它们调整为 1.5 的比例并停留在那里。我不知道是什么原因造成的。有什么想法吗？

Answer 1

这是因为移动设备的行为方式与 :hover 伪 class 不同。在您点击该元素之前，浏览器无法知道您将鼠标悬停在哪里，这就是它添加悬停样式的时候。当您点击其他地方时，缩放会消失。

遗憾的是，没有针对此开箱即用的 CSS 解决方案。你需要 JavaScript。对于纯粹的 CSS 解决方案，我建议您使用 @media 查询将 :hover 样式仅分配给大视口，然后 运行 进入平板电脑问题。