在css悬停时，更改另一个元素的颜色

Question

我有一个带有类名＆＃34;示例＆＃34;的元素，当我将鼠标悬停在该元素上时，我想更改另一个带有类名称的元素＆＃34; example-title＆＃34;低于该元素，使颜色变为白色。我怎么用sass / css做到这一点？

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

Answer 1

你也可以像这样使用〜选择器：

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

See this fiddle

Answer 2

使用adjacent sibling selector +：

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

SASS：

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