html - 禁用 :hover CSS on Mobile

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 {
.my-image:hover {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    transform: none;
}
}

更新:2017 年 9 月 5 日，媒体查询 4 ​​规范被采纳，其中 handheld 标签被弃用。建议使用 hover 媒体查询 - 对于可以悬停在元素上而无需单击的设备，以及 not hover 不能悬停的设备。

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

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

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