@media ordinateur de poche - aucun effet de survol

Question

Pour un projet en cours, j'essaie de supprimer les effets de survol sur des appareils dotés d'un écran tactile. Mon plan est d'utiliser @media handheld { /* non-hover styles here */ }, coller ici tout dans mon fichier CSS qui a :hover dessus, et il suffit de supprimer tous les effets hover.

Exemple:

/* desktop */ 

a.my_element { 
color : #ff0000; 
} 
a.my_element:hover { 
color : #000000; 
} 

/* handheld devices */ 

@media handheld { 
a.my_element:hover { 
} 
} 

Est-ce ma logique correcte? Est-ce que ça va marcher?

Answer 1

Effectuez les opérations suivantes:

HTML

<a href="#" class="my_element"> example </a> 

CSS

a.my_element { 
color : #ff0000; 
} 
a.my_element:hover { 
color : #000000; 
} 

/* handheld devices */ 

@media (max-width: 480px){ 
    a.my_element:hover { 
     color: #ff0000;   
    } 
} 

Ce sera à peu près utiliser les médias requête à 460px de style en vol stationnaire pour être exactement la même couleur que si il n'a pas été plané (créant finalement ce que vous aimeriez faire).

DEMO JSFiddle