How do I apply :hover to multiple bem statements in sass?

Question

I have this:

.magic-sparkles {

    &-red {
        background: red;
    }

    &-blue {
        background: blue;
    }

    &-green {
        background: green;
    }
}

However I want to change it so it only works on hover.

The end result compiled would be:

.magic-sparkles-red:hover { background: red;}
.magic-sparkles-blue:hover { background: blue;}
.magic-sparkles-green:hover { background: green;}

Changing the first line to .magic-sparkles:hover { does not work. Do I need to simply add :hover to every single nested item or is there a way to apply it to all of them simultaneously?

Answer 1

This will work:

:hover.magic-sparkles {
    &-red {
        background: red;
    }

    &-blue {
        background: blue;
    }

    &-green {
        background: green;
    }
}