How to make entire div change color on hover using css?

Question

I have the following:

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

I'm trying to make each of the two divs change color when you hover over them - whether you hover over the text of off to the right or left of the text. Currently the color changes only if I hover over the text. Any idea how this can be done? Here's my fiddle with css:

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

Answer 1

You have a space in the hover selector. This matters because the space is the descendant selector in CSS

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

This means that only hovered descendants of .sidebar-link are affected by the rules. Remove the space.

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

Answer 2

You can achieve this easily by this following code: 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>