Slider gleitet auf Klick, aber ich will nicht, diese

Question

ich CSS-Änderungen müssen nur bei großen Bildschirmen unten nicht kompiliert nicht

&:hover:not(@media @smartphones), 
&.hover-this:not(@media @smartphones) { 
    width: 15rem; 

    .row .label-area { 
     display: inline-block; 
     position: absolute; 
     left: @icon-width; 
    } 

    + .menu { left: 16rem; } 
} 

ich einen Slider haben in der Bildschirm nach links angewendet werden, die Folien out und nehmen Sie breitere Breite (15rem) Aber es gibt keine Schwebe Sache in Smartphones, so dass es auf Klick gleitet, ich möchte nicht passieren

Answer 1

Es gibt keine "nicht" Media-Abfrage. Gib einfach die Stile an, wo genau du sie haben willst. Lassen Sie in diesem Fall den Hover-Stil OUT des Bereichs "Kleine Bildschirme".

// Small screens 
@media only screen and (max-width: 767px) { 
    // Nothing here... 
} 

// Large screens 
@media only screen and (min-width: 768px) { 
    #something:hover { 

    } 
} 

Answer 2

Die Medienanfragen sind nicht Selektoren und daher kann man sie nicht als Argument übergeben an die :not (Negation) Selektor. The CSS negation selector only takes simple selectors as argument.

Stattdessen sollten Sie den @media Block mit dem logischen not Operator wie im folgenden Code-Schnipsel verwenden: (es nur eine Probe für Ihr Verständnis ist, die Abfrage Medien ändern nach Ihren Bedürfnissen)

&:hover, &.hover-this { 
    @media not screen { 
    width: 15rem; 

    .row .label-area { 
     display: inline-block; 
     position: absolute; 
     left: @icon-width; 
    } 

    + .menu { left: 16rem; } 
    } 
} 

@icon-width: 16px; 

---

unten ist ein extract from the W3C Specs about the logical NOT operator: (vorliegende unterhalb Beispiel 7)

Die logische NICHT throug kann ausgedrückt werden h das Schlüsselwort 'nicht'. Das Vorhandensein des Schlüsselwortes "nicht" am Anfang der Medienabfrage negiert das Ergebnis. D.h., wenn die Medienabfrage ohne das Schlüsselwort "nicht" wahr gewesen wäre, wird sie falsch und umgekehrt. Benutzeragenten, die nur Medientypen unterstützen (wie in HTML4 beschrieben), erkennen das Schlüsselwort 'not' nicht und das zugehörige Stylesheet wird daher nicht angewendet.