題目：如下圖，當(dāng)鼠標(biāo)移動到右邊的div時(shí)，左邊的div變?yōu)榧t色；當(dāng)鼠標(biāo)移動到左邊的div時(shí)，右邊的div變?yōu)榧t色。

圖1 初始狀態(tài)

圖2 鼠標(biāo)移到左邊時(shí)，右邊div變紅

圖3 鼠標(biāo)移動到右邊時(shí)，左邊div變紅

思路：

先確定html部分的內(nèi)容，代碼如下

<div class="father">

? ? ?<div class="child" id="child1"></div>

? ? ?<div class="child" id="child2"></div>

</div>

要改變兄弟元素的樣式，首先想到的就是利用相鄰兄弟選擇器，相鄰兄弟選擇器介紹如下（摘自https://www.w3school.com.cn/css/css_selector_adjacent_sibling.asp）：

圖4 相鄰兄弟選擇器介紹

但是，相鄰兄弟選擇器只能改變元素后面的元素，對于題目中，只能實(shí)現(xiàn)圖2的部分

實(shí)現(xiàn)的代碼為：

.child:hover + .child {? ? ?

????background-color: red;

}

接著處理圖3的效果，我的思路是：

先實(shí)現(xiàn)移動到任意的div都會使child1變紅，接著規(guī)定移動到child1時(shí)，child1變白，這個(gè)部分需要考慮css樣式的權(quán)重

代碼如下：

.father:hover #child1 {??

????background-color: red;

}

.father #child1:hover {??

????background-color: white;

}

這兩者的權(quán)重相同，所以遇到?jīng)_突時(shí)，以下面的樣式為準(zhǔn)

到此，就實(shí)現(xiàn)了題目所需要實(shí)現(xiàn)的效果啦。

完整代碼：

html代碼

圖5 HTML代碼片段

CSS代碼

圖6 css代碼