禁用：将移动设备上的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 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); 
} 
} 

Answer 2

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