通过悬停另一个来更改元素CSS

Question

如何通过在CSS中悬停另一个元素来更改元素CSS？

我们用这个：

.example .example2 li:hover .element

如果我们有：

<div class='example'><div class='example2'><li></li></div></div>
<div class='element'></div>

但如果我们有：

<div class='example'><div class='example2'><li></li></div></div>
<div class='exemple2'><div class='element'></div></div>

我们无法使用.example .example2 li:hover .exemple2 .element

是否有任何方法可以让父元素.exemple2在悬停中选择他的孩子.element？

Answer 1

您可以使用

.exemple:hover > .exemple2 .element

Answer 2

我认为你想要的是相邻的兄弟组合。

https://css-tricks.com/almanac/selectors/a/adjacent-sibling/

Answer 3

您需要使用+ selector，例如：

.exemple:hover + .exemple2 .element{
    color: red;
}

DEMO