Wie alle Hover auf kleinen Geräten entfernen?

Question

So entfernen Sie Hover-Effekte für Elemente in CSS.

Ich habe zum Beispiel eine solche HTML und CSS:

@media (max-width: 1220px) { 
 
    .column { 
 
    width: 200px; 
 
    } 
 
    .para { 
 
    display: none; 
 
    } 
 
    .link:hover { 
 
    color: red; 
 
    } 
 
} 
 

 
@media (max-width: 992px) { 
 
    .column { 
 
    width: 100px; 
 
    } 
 
}

<div class="column"> 
 
    <a class="link" href="#">Some link</a> 
 
    <p class="para"> 
 
    Some para 
 
    </p> 
 
</div>

von der Tat gibt es viel mehr Element. Wie deaktivieren Sie alle Hover für Elemente mit einer Bildschirmgröße von weniger als 992px?

JSFiddle

Answer 1

@media (max-width: 1220px) { 
    .column { 
    width: 200px; 
    } 
    .para { 
    display: none; 
    } 

} 

    @media only screen and (max-width: 1220px) and (min-width: 993px) { 

     .link:hover { 
     color: red; 
     } 
    } 

    @media (max-width: 992px) { 
     .column { 
     width: 100px; 
     } 

    } 

Was in Ihrer ursprünglichen CSS passiert ist, dass, weil die erste Medienabfrage für max-width: 1220px ist, dass die zweite Medienabfrage gilt auch für. Daher müssen Sie in der ersten Abfrage eine min-width angeben, so dass die :hover Bedingung nicht auf alle Bildschirme mit max-width: 1220px (die auch Bildschirme mit max-width 992px enthalten würde) angewendet wird.

EDITED, um die Anforderung widerzuspiegeln, dass einige Stile für alle Bildschirmauflösungen unter 1220px gelten.