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 for mobile？

Answer 1

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

Answer 2

添加媒体查询，如

@media screen and (min-width: 1024px){
.my-image:hover {
    -webkit-transform:scale(1.5);
    -moz-transform:scale(1.5);
    -ms-transform:scale(1.5);
    transform:scale(1.5);
}
}

禁用：在移动设备上悬停CSS

2 个答案: