Sass：如何在悬停中获取父选择器

Posted 2021-05-04

重现步骤：

.root {
    .parent {
        color: red;

        &:hover & {
            &__child {
                background-color: blue;
            }
        }
    }
}

实际发生了什么：

.root .parent {
  color: red;
}

.root .parent:hover .root .parent__child {
    background-color: blue;
}

预期结果：

.root .parent {
  color: red;
}

.root .parent:hover .parent__child {
    background-color: blue;
}

所以，&中的&:hover不再是父选择器了。如何获得父选择器？

答案

&用于在嵌套时将选择器连接在一起，因此您只需要在hover上使用它。你不需要额外的&

尝试：

/* hover concatenated to 'parent' and the 'parent__child' is nested to hover */
.root {
    .parent {
        color: red;

        &:hover {
            .parent__child{
                background-color: blue;
            }
        }
    }
}