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

Question

复制步骤：

.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不再是父选择器。如何获得父选择器？

Answer 1

&用于在嵌套时将选择器串联在一起，因此仅在hover上需要它。您不需要多余的&

尝试：

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

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