SB2055 SB2055 - 1 year ago 94
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>

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:

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download