CODEWITHSUNDEEP
csssass
Maze
Maze

Reputation: 41

Sass: How to get parent selector in hover

Steps to reproduce:

.root {
    .parent {
        color: red;

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

What is actually happening:

.root .parent {
  color: red;
}

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

What is expected：

.root .parent {
  color: red;
}

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

So, the & in &:hover is not parent selector anymore. How can I get parent selector ?

Upvotes: 0

Views: 75

Answers (1)

awran5
awran5

Reputation: 4536

& is for concatenating selectors together when nesting so you need it only on hover. You don't need the extra &

Try:


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

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

Upvotes: 2

Related Questions