通過懸停另一個元素來更改元素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

有什麼方法來pu t父母元素.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