deaktivieren Hover Eigenschaft für das Element in SASS

Question

Angenommen, wir hatten:

.a { 

    /** Some properties here **/ 

    .b { 
     /* Some properties here **/ 
    } 

    &:hover { 
     .b { 
      /* change b here */ 
     } 
    } 
} 

Und es gibt ein Element <div class = "b">, gibt es eine Möglichkeit, die Hover-Eigenschaft, um zu verhindern auf diese div angewendet?

Ich habe versucht:

.a { 

    /** Some properties here **/ 

    .b { 
     /* Some properties here **/ 
    } 

    .c { 
     /* empty */ 
    } 

    &:hover { 
     .b:not(.c) { 
      /* change b here */ 
     } 
    } 
} 

Und ich brachte auch die Klasse <div class = "b c"> zu sein.

Irgendwelche Hilfe würde geschätzt werden diese scss-Datei wird von anderen Dateien geteilt, so dass ich es nicht zu viel ändern möchte.

Answer 1

Angenommen, ich möchte es nur auf div mit der Klasse b anwenden, aber nicht auf b und c. Wie würde ich das tun?

Dies sollte es tun, alle Elemente, vorausgesetzt, Sie sind für den Hover-Effekt wünschen würde anzuwenden sind div Elemente:

&:hover { 
    div:not([class*='b c']) { 
     /* stuff here */ 
    } 
} 

Beachten Sie, dass die Reihenfolge der Klassen wichtig ist, so Klasse c muss sofort nach Klasse b kommen.

Codepen

Lesen Sie über das, was jeder Selektor here tut.