用CSS解决hover一个div，改变另外2个div的样式

Posted 2021-11-02 勇敢*牛牛

用CSS解决hover一个div，改变另外2个div的样式

在项目中遇到这样一个问题：
div1和div3有默认的css样式 背景颜色是绿色
div2有一个默认的css样式 背景颜色是红色
需求：当鼠标悬浮在div1，div2，div3上时 让当前div的背景颜色变为红色，其余背景颜色变为绿色，无鼠标悬浮时 让其展示默认效果

<style>
        .div1 {
            width: 100px;
            height: 100px;
            float: left;
            background-color: green;
        }
        .div2 {
            width: 100px;
            height: 100px;
            float: left;
            background-color: red;
        }
        .div3 {
            width: 100px;
            height: 100px;
            float: left;
            background-color: green;
        }
      
    </style>

	<div class="div1">内容一</div>
    <div class="div2">内容二</div>
    <div class="div3">内容三</div>

首先让悬浮时背景颜色都改变为红色

 		 .div1:hover{
            background-color: red;
        }
        .div2:hover{
            background-color: red;
        }
        .div3:hover{
            background-color: red;
        }
      

其次需要解决的问题就是 : 当鼠标悬浮在div1和div3时需要将div2的背景颜色变为绿色

        .div1:hover+.div2{
            background-color: green;
        }

通过查资料 可以用hover加上相邻兄弟选择器 + 来实现，解决了鼠标悬浮在div1上时div2背景颜色改变，但依然无法解决鼠标悬浮在div3时改变div2的样式

最后通过 ~ 选择器来解决，但需要将div3的位置放在div1前 保证不影响div1的兄弟选择器起作用，给样式加上绝对定位即可原有的效果

	 <div class="div3">内容三</div>
	 <div class="div1">内容一</div>
     <div class="div2">内容二</div>

		.div1:hover+.div2{
            background-color: green;
        }
		.div3:hover~.div2{
            background-color: green;
        }

注意： ~ 的用法
1.需要保证元素具有相同的父元素，
2. div~p 表示div后所有的p都会被选择

	<div></div>
    <p></p>
    <p></p>