на css наведите указатель мыши, измените цвет другого элемента

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