CSS transition on hover using BEM and Sass

Question

I am trying to execute a CSS transition (opacity:0 to opacity:1 with pleasant transition) - I'm writing Sass and using BEM.

I was hoping to make use of the sibling operator + so that I can maintain my Sass nested BEM structure.

When the user hovers over .price__text I want to set the opacity of it's sibling element .price__tooltip to 1

Here is my SCSS as an example

.price {
    &__text {
        [...]
    }
    &__tooltip {
        transition: all 0.2s ease-in;
        opacity: 0;
        [...]
        &+ .price__text:hover {
            opacity: 1;
        }
    }
}

I thought that the last selector in the SCSS, &+ .price__text:hover would detect that when the sibling, .price__text has as :hover psuedo class it would make the current selected element .price__tooltip have opacity:1 - but this doesn't seem to be correct.

score 1 · Accepted Answer · answered Nov 18 '16 at 08:58

Try something like this instead:

.price__tooltip {
    transition: all 0.2s ease-in;
    opacity: 0;
    [...]
}
.price__text:hover {
      &+.price__tooltip{
        opacity: 1;
      }
}

}

With this, the sibling .price__tooltip should get his opacity to 1 when .price__text is in hover state.

CSS transition on hover using BEM and Sass

1 Answers1