将鼠标悬停在相关复选框上时,如何激活标签的CSS样式？

Question

每次我将鼠标悬停在复选框的标签上都会变为黄色:

标记

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

CSS

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

当我将鼠标悬停在相关复选框上时,我希望标签突出显示.如果我将鼠标悬停在复选框上,是否有办法使用CSS触发相同的悬停规则？或者我必须使用JavaScript ...？

Answer 1

你可以使用CSS兄弟选择器,如下所示:

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

请注意,这在IE6中不起作用.

Answer 2

只需将复选框放在标签内:

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

现在,当您将鼠标悬停在复选框上时,您也会将鼠标悬停在标签上,现有规则就足以突出显示它.