How can I activate a CSS style for a label when hovering over the associated checkbox?

Question

Every time I hover over the label of a checkbox it turns yellow:

Markup

<input type="checkbox" value="hello" id="hello" name="deletefiles[]"/>
<label for="hello">hello</label>

CSS

label:hover, label:active {
   background:yellow;
}

When I hover over the related checkbox, I want the label to highlight. Is there a way to fire the same hover rule using CSS if I hover over the checkbox as well? Or will I have to use JavaScript for this...?

Answer 1

You can use a CSS sibling selector, like this:

label:hover, label:active, input:hover+label, input:active+label {
    background:yellow;
}

Note that this won't work in IE6.

Answer 2

Just put the checkbox inside the label:

<label for="hello">
  <input type="checkbox" value="hello" id="hello" name="deletefiles[]"/>
  hello
</label>

Now when you hover over the checkbox, you'll also be hovering over the label, and your existing rules will suffice to highlight it.

Answer 3

The jQuery solution:

$(document).ready(function(){
   $('#hello, label[for="hello"]').hover(function(){$(this).addClass('.hover');},
                                         function(){$(this).removeClass('.hover');});

});

...

.hover
{
   background-color: yellow;
}

And this DOES work in IE6.