Cambia lo sfondo di child if parent: hover

Question

Voglio cambiare il colore bg di .circle.icon se il valore diè al passaggio del mouse. Qualche idea su come ottenerlo, possibilmente senza Javascript?

<div id="scr1" class="large-6 columns timeline"> 
    <div class="line"></div> 
    <ul class="posts"> 
     <li class="posts-item"> 
      <div class="circle icon"></div> 
      <h2 class="posts-item-title"> 
       <a href=""></a> 
       </h2> 
      <p class="summary"></p> 
     </li> 
    </ul> 
</div> 

Answer 1

Mi piace così.

.posts-item:hover .circle.icon { 
    background: green; 
} 

No jQuery - tutti sono felici :)