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伪类的行为方式不同。浏览器无法知道在您点击元素之前将其悬停在哪里，以及添加悬停样式时的浏览器。当你点击其他地方时，缩放将会消失。

可悲的是，没有开箱即用的CSS解决方案。你需要JavaScript。对于纯CSS解决方案，我建议您使用@media查询仅将:hover样式分配给大型视口，但之后会遇到平板电脑问题。