前端面试题之CSS
2020-05-11 本文已影响0人
KEN_CHEN
题目：如下图，当鼠标移动到右边的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代码
