2016-11-17 35 views
0

CSSトランジションを実行しようとしています(opacity:0opacity:1) - 私はSassとBEMを使っています。BEMとSassを使用したホバー上のCSS遷移

兄弟演算子+を使用して、SassネストされたBEM構造を維持できるようにしたいと考えていました。

ユーザーが、私はそれがここ

1に要素 .price__tooltip兄弟だの不透明度を設定したい .price__textの上に置いた一例としての私のSCSSが

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

である私は、SCSSの最後のセレクタと思いました&+ .price__text:hoverは、兄弟の.price__text:hover擬似クラスを持つとき、現在選択されている要素.price__tooltipopacity:1があることを検出しますが、これは正しいとは限りません。

答えて

1

ではなく、このような何か試してみてください。これにより

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

}

を.price__textがホバー状態にあるとき、兄弟.price__tooltipは1に彼の不透明度を取得する必要があります。

関連する問題