前端面试题之CSS

题目：如下图，当鼠标移动到右边的div时，左边的div变为红色；当鼠标移动到左边的div时，右边的div变为红色。

图1 初始状态 图2 鼠标移到左边时，右边div变红 图3 鼠标移动到右边时，左边div变红

---

思路：

先确定html部分的内容，代码如下

<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 相邻兄弟选择器介绍

但是，相邻兄弟选择器只能改变元素后面的元素，对于题目中，只能实现图2的部分

实现的代码为：

.child:hover + .child {     

    background-color: red;

}

接着处理图3的效果，我的思路是：

先实现移动到任意的div都会使child1变红，接着规定移动到child1时，child1变白，这个部分需要考虑css样式的权重

代码如下：

.father:hover #child1 {  

    background-color: red;

}

.father #child1:hover {  

    background-color: white;

}

这两者的权重相同，所以遇到冲突时，以下面的样式为准

到此，就实现了题目所需要实现的效果啦。

---

完整代码：

html代码

图5 HTML代码片段

CSS代码

图6 css代码