Wie man das gesamte div ändert, schwärze mit css?

Question

Ich habe folgendes:

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

Ich versuche, jede der beiden divs Farbe ändern, wenn Sie über sie schweben - egal ob Sie über den Text von Off nach rechts oder links des Textes schweben. Derzeit ändert sich die Farbe nur, wenn ich den Mauszeiger über den Text halte. Irgendeine Idee, wie das gemacht werden kann? Hier ist meine Geige mit CSS:

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

Answer 1

Sie haben einen Platz im Schwebe Wähler. Dies ist wichtig, weil der Raum der Nachkommen Selektor in CSS ist

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

Das bedeutet, dass nur schwebte Nachkommen von .sidebar-link werden von den Regeln betroffen. Entfernen Sie den Speicherplatz.

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

Answer 2

Sie können dies durch diesen folgenden Code leicht erreichen: 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>