禁用：將移動設備上的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; 
} 
}