用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>

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

注意： ~ 的用法
1.需要保證元素具有相同的父元素，
2. div~p 表示div後所有的p都會被選擇

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