SB2055 SB2055 - 2 months ago 6
CSS Question

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

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

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/

Comments