Deaktivieren: Hover CSS auf Mobile

Question

Ich habe die folgenden CSS auf einigen img Elemente auf meiner Seite definiert.

.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); 
} 

Aus irgendeinem Grund wird die Hover-Klasse auf einem iPhone zu jeder Zeit zu aktivieren ich daran vorbei bewegen (das heißt, meine Finger über die Bilder bewegen an ihnen vorbei zu blättern). Gibt es eine Möglichkeit, den Hover-CSS nur für Handys zu deaktivieren?

Answer 1

hinzufügen Medien Abfrage wie

@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; 
} 
}