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.