CSS-Übergang bei Hover mit BEM und Sass

Question

Ich versuche, einen CSS-Übergang (opacity:0 zu opacity:1 mit angenehmen Übergang) auszuführen - ich schreibe Sass und BEM verwenden.

Ich hatte gehofft, den Geschwisteroperator + zu verwenden, damit ich meine verschachtelte SEM-BEM-Struktur beibehalten kann.

Wenn der Benutzer über .price__text schwebt möchte ich die Opazität einstellen davon Element Geschwister .price__tooltip-1

Hier ist meine SCSS als Beispiel

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

Ich dachte, dass der letzte Wähler in der SCSS &+ .price__text:hover würde erkennen, dass wenn das Geschwister .price__text als :hover psuedo Klasse hat es das aktuelle ausgewählte Element .price__tooltip haben würde - aber das scheint nicht richtig zu sein.

Answer 1

Versuchen etwas Ähnliches statt:

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

}

Damit sollte die Geschwister .price__tooltip seine Opazität zu 1 bekommen, wenn .price__text im Schwebezustand befindet.