Html 将鼠标悬停在关联的复选框上时，如何激活标签的 CSS 样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3359390/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I activate a CSS style for a label when hovering over the associated checkbox?
提问by matt
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
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...?
当我将鼠标悬停在相关复选框上时，我希望标签突出显示。如果我也将鼠标悬停在复选框上，是否可以使用 CSS 触发相同的悬停规则？或者我必须为此使用 JavaScript 吗...？
回答by SLaks
You can use a CSS sibling selector, like this:
您可以使用 CSS 兄弟选择器，如下所示：
label:hover, label:active, input:hover+label, input:active+label {
background:yellow;
}
Note that this won't work in IE6.
请注意，这在 IE6 中不起作用。
回答by Shog9
Just put the checkbox insidethe 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.
现在，当您将鼠标悬停在复选框上时，您也会将鼠标悬停在标签上，您现有的规则就足以突出显示它。
回答by Stefan Kendall
The jQuery solution:
jQuery 解决方案：
$(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.
这在 IE6 中确实有效。
回答by Phil
/*CSS*/
/*-------------------------------------------------*/
input:not(:checked) + label:hover{
color: #d51e22;
cursor: pointer;
background-color: #bbb;
}
input:checked + label[for="tab1"],
input:checked + label[for="tab2"],
input:checked + label[for="tab3"],
input:checked + label[for="tab4"]{
?color: #d51e22;
?text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);
background-color: #000;
}
label[for="tab1"],[for="tab2"],[for="tab3"],[for="tab4"] {
width:24%;
display: inline-block;
margin: 0 0 -1px;
padding: 25px 25px;
font-weight: 600;
font-size:24px;
text-align: center;
border-radius:15px;
background-color: #d51e22;
color: #fff;
/*border: 1px solid transparent;*/
}
/*HTML*/
/*-------------------------------------------------*/
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">Text here</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">Text here</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">Text here</label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4">Text here</label>
