Jak zrobić cały kolor zmiany div po najechaniu myszą używając css?

Question

mam następujące:

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

Próbuję zrobić każdy z dwóch div zmienia kolor po najechaniu na nich - czy po najechaniu na tekst na prawo lub na lewo od tekstu. Obecnie kolor zmienia się tylko po najechaniu kursorem na tekst. Masz pomysł, jak to zrobić? Oto moje skrzypce z CSS:

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

Answer 1

mieć miejsca w selektor hover. To ważne, ponieważ przestrzeń jest potomkiem selektor w CSS

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

Oznacza to, że tylko unosił potomkowie .sidebar-link są objęte zasadami. Usuń przestrzeń.

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

Answer 2

Można to osiągnąć w prosty sposób tego poniższego kodu: 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>