div：他の要素にカーソルを置いたときのdivの後ろを制御する

Question

box2の後ろを制御したいとき、ホバリングをbox1にする。
私はこのコードをテストしましたが、うまくいかなかったのです...問題は何ですか？

.box1:hover .box2:after{SOME CSS} 

Answer 1

.box1 , .box2 , .box2:after{ 
 
\t width: 100px; 
 
\t height: 100px; 
 
\t background-color: #ccc; 
 
\t margin: 10px; 
 
\t display: inline-block; 
 
} 
 

 
.box2:after { 
 
\t content: 'Box2:after'; 
 
\t position: relative; 
 
\t display: inline-block; 
 
\t left: 200px; 
 
\t top: -30px; 
 
} 
 

 
.box1:hover ~ .box2:after { 
 
\t background-color: red 
 
}

<div class="box1">BOX 1:hover my</div> 
 
<div class="box2">Box 2</div>