、CSS hoverで他の要素の色を変更

Question

クラス名が "example"の要素があり、その要素の上にカーソルを置くと、その要素の下にある "example-title"というクラス名で別の要素を変更したい色を白にする。 sass/cssを使ってどうすればいいですか？

<div class="example"></div> 
<div class="example-title"></div> 

Answer 1

adjacent sibling selector+を使用します。

.example:hover + .example-title { 
    white; 
} 

はSASS：あなたが使用することもでき

.example { 
    &:hover { 
     & + .example-title { 
      color: white; 
     } 
    } 
} 

Answer 2

〜このようなセレクタ：

.example:hover ~ .example-title { background: red;} 

See this fiddle