javascript - 鼠标悬停时类发生变化但没有效果

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{
  }
}