Div'in üzerine mouse'ı getirdiğimde div'in içindeki span'ın renginin değişmesini istiyorum.
Bu şekilde bir kod yazdığımda çalışmıyor.

<div class="box">buranın üzerine gelince <span class="box2">buranın renginin değişmesi gerekiyor</span></div>

.box:hover ~ .box2 {
    color:red;
}

Fakat span'ı div'in içine değil de aşşağıdaki gibi div'den sonra yazdığımda kod çalışıyor.

<div class="box">buranın üzerine gelince</div>
<div class="box2">buranın rengi değişecek</div>

.box:hover ~ .box2 {
    color:red;
}

Bunu css'te yapmak için nasıl bir kod yazmam lazım?