使用SCSS/CSS设置的按钮hover悬停效果无法生效问题求助

问题原因 #

你在SCSS中嵌套:hover伪类时缺少父选择器标识符&，导致编译后生成的选择器为.btn :hover（两个类名中间存在空格），该选择器匹配的是.btn元素内部所有被悬停的子元素，而非悬停状态下的.btn按钮本身，因此悬停效果无法触发。

修复方案 #

将SCSS代码调整为如下写法：

.btn{
    background-color: $secondColor;
    font-variant-caps: all-petite-caps;
    border-radius: 2px;
    &:hover{
        background-color: aqua;
    }
}

调整后编译生成的CSS代码为：

.btn {
  background-color: #e5383b;
  font-variant-caps: all-petite-caps;
  border-radius: 2px;
}

.btn:hover {
  background-color: aqua;
}

此时生成的.btn:hover选择器无空格，可正确匹配悬停状态的按钮，悬停效果即可正常生效。

内容的提问来源于stack exchange，提问作者Yechiel babani