Come rendere l'intero div cambia colore su hover usando css?

Question

Ho il seguente:

<div id="side-menu" class="sidebar-nav span2"> 
     <div class="sidebar-link"><span>Link 1</span></div> 
     <div class="sidebar-link"><span>Link 2</span></div> 
    </div> 

Sto cercando di rendere ciascuno dei due div cambiano colore quando si passa su di loro - se si posiziona il mouse sopra il testo a destra oa sinistra del testo. Attualmente il colore cambia solo se si passa il mouse sopra il testo. Qualche idea su come questo possa essere fatto? Ecco il mio violino con css:

http://jsfiddle.net/PTSkR/56/

Answer 1

Hai uno spazio nel selettore hover. Questo è importante perché lo spazio è il selettore discendente in CSS

div.sidebar-link :hover{ 
    background-color: #E3E3E3; 
} 

Questo significa che solo aleggiava discendenti di .sidebar-link sono influenzati dalle regole. Rimuovi lo spazio.

http://jsfiddle.net/ExplosionPIlls/PTSkR/57/

Answer 2

È possibile raggiungere questo facilmente da questa seguente codice: Link

.cstDiv{ 
 
    padding:10px; /* text-align:center may be used for a good look */ 
 
    width:55px; 
 
} 
 

 
div.cstDiv:hover{ 
 
    background-color:gray;  
 
    color:white; 
 
    cursor:pointer; /* you may delete this if you want */ 
 
}

<div> 
 
     <div class="cstDiv">Link I</div> 
 
     <div class="cstDiv">Link II</div> 
 
     <div class="cstDiv">Link III</div> 
 
     <div class="cstDiv">Link IV</div> 
 
    </div>