Klassenänderungen mit der Maus darüber, aber keine Wirkung

Question

Ich versuche, ein Dropdown-Menü mit JS und SCSS zu schaffen, kann ich sehen, dass die Klasse tut Veränderung in meiner dev-Konsole, aber es gibt keinen Effekt

hier ist die SCSS

a{ 
    text-decoration: none; 
    width: 15%; 
    height: 100%; 
    transition: 0.5s ease; 
    background-color: rgba(241, 235, 235, 0.62); 
    display: inline-block; 

    .expanded{ 
     height: 20em; 
     transition: 0.5s ease; 
    } 
    } 

JS

for(var i = 0; i < a.length; i++){ 
    a[i].onmouseover = function(){ 
     this.classList = "expanded"; 
    } 
    a[i].onmouseleave = function(){ 
     this.classList.remove("expanded") 
    } 
    } 

Answer 1

Sie fehlt das "&":

a{ 
    &.expanded{ 
    } 
}