控制：當一個div在另一個元素上懸停時

Question

我想控制box2之後在box1上徘徊。
我測試這個代碼，但它沒有work.so ...最新的問題是什麼？

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