在移动设备上禁用 :hover CSS

Question

img我在页面上的某些元素上定义了以下 CSS 。

.my-image {
    width: 100% !important;
    height: auto;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}

.my-image:hover {
    -webkit-transform:scale(1.5);
    -moz-transform:scale(1.5);
    -ms-transform:scale(1.5);
    transform:scale(1.5);
}

由于某种原因，只要我滚动经过它（即沿着图像移动手指以滚动经过它们），悬停类就会在 iPhone 上激活。有什么方法可以禁用仅适用于移动设备的悬停 CSS？

Answer 1

@media handheld {\n.my-image:hover {\n    -webkit-transform: none;\n    -moz-transform: none;\n    -ms-transform: none;\n    transform: none;\n}\n}\n

\n\n

更新：2017 年 9 月 5 日，媒体查询 4 ​​规范被采用，其中该handheld标签已被弃用。建议使用hover媒体查询 - 适用于您可以将鼠标悬停在项目上而无需单击的设备以及not hover不能单击的设备。

\n\n

@media (not hover) {\n.my-image:hover {\n    -webkit-transform: none;\n    -moz-transform: none;\n    -ms-transform: none;\n    transform: none;\n}\n}\n

\n\n

您还可以使用媒体查询pointer:(coarse|fine|one)。coarse\xe2\x80\x94 用于手指控制的触摸屏、fine鼠标或手写笔以及none其他。

\n\n

@media (pointer:coarse) {\n.my-image:hover {\n    -webkit-transform: none;\n    -moz-transform: none;\n    -ms-transform: none;\n    transform: none;\n}\n}\n

\n