类在鼠标悬停时发生更改，但无效

Question

我正在尝试使用JS和scss创建一个下拉菜单，我可以看到该类在我的开发控制台中确实发生了变化，但是没有任何效果

这是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

您缺少“＆”：

a{
  &.expanded{
  }
}