Javascript 标签焦点不会更改css样式

Javascript 标签焦点不会更改css样式,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个简单的表单,希望通过改变标签的背景颜色来突出重点标签,但是jquery在这里似乎不起作用。 控制台不显示任何错误。有人能帮我一下吗 <form action="" method="POST" id="qrForm"> <label for="enter1">Enter<input id='enter1' type="radio" name="enter"></label> <label for="enter2">

我有一个简单的表单,希望通过改变标签的背景颜色来突出重点标签,但是jquery在这里似乎不起作用。 控制台不显示任何错误。有人能帮我一下吗

<form action="" method="POST" id="qrForm">

    <label for="enter1">Enter<input id='enter1' type="radio" name="enter"></label>
    <label for="enter2">Exit<input id='enter2' type="radio" name="enter"></label><br>
    <label for="device1">Took a device<input id="device1" type="radio" name="device"></label>
    <label for="device2">Returned a device<input id="device2" type="radio" name="device"></label>
</form>

<script>
    $("label").focus(function(){
        $(this).css('background-color', '#00CC66');
    });
</script>

进入
退出
拿了一个装置 返回一个设备 $(“标签”).focus(函数(){ $(this.css('background-color','00CC66'); });

实际上,我可以通过添加/删除一个类来完成它,但我想知道为什么这个类不起作用。

既然可以在CSS中使用js,为什么还要使用js

label:focus {
    background-color: #00cc66;
}
如果您希望标签元素可聚焦,您还需要添加
tabindex=0
,但就像您单击标签一样,焦点会移动到相关的
输入
元素

或者,您可以使用css下一个同级选择器,如下所示:

html:


或者使用不同的标记和css选择器

既然可以在css中使用js,为什么还要使用js

label:focus {
    background-color: #00cc66;
}
如果您希望标签元素可聚焦,您还需要添加
tabindex=0
,但就像您单击标签一样,焦点会移动到相关的
输入
元素

或者,您可以使用css下一个同级选择器,如下所示:

html:


或者使用不同的标记和css选择器

试试这个,因为你不能使用“聚焦于标签”——

$( "form input:radio" ).focus(function(){
            $(this).parent('label').css('background-color', '#00CC66');
        });

试试这个,因为你不能使用焦点标签-

$( "form input:radio" ).focus(function(){
            $(this).parent('label').css('background-color', '#00CC66');
        });

您不能使用
.focus()
触发标签的焦点,而是使用
输入来触发焦点,请选中此处

$("input").focus(function(){
    $('label').css('background', '#00CC66');
});


您不能使用
.focus()
触发标签的焦点,而是使用
输入来触发焦点,请选中此处

$("input").focus(function(){
    $('label').css('background', '#00CC66');
});


标签:焦点{背景色:#111;}。纯CSS他们没有专注。是focusedlabel:focus{background color:#111;}。纯CSS他们没有专注。这是focusedWell,我正在尽我所能练习。谢谢你的建议:)不客气!这一切都是关于为工作使用正确的工具,很高兴能提供帮助,但是,最好使用
label:active
它将具有相同的效果,而无需设置
tabindex
属性。无论如何,我不认为这是一个好的观点,直觉只是css的一部分,然后意识到重点放在输入上-将tabindex添加到标签对可用性/a11y来说并不是很好,因为这不是默认行为。imho最好的方法是按照我在回答的第二部分中写的那样做。我从来没有听说过tab索引,但它对我来说是一个非常有趣的属性。谢谢你!嗯,我正在尽我所能练习。谢谢你的建议:)不客气!这一切都是关于为工作使用正确的工具,很高兴能提供帮助,但是,最好使用
label:active
它将具有相同的效果,而无需设置
tabindex
属性。无论如何,我不认为这是一个好的观点,直觉只是css的一部分,然后意识到重点放在输入上-将tabindex添加到标签对可用性/a11y来说并不是很好,因为这不是默认行为。imho最好的方法是按照我在回答的第二部分中写的那样做。我从来没有听说过tab索引,但它对我来说是一个非常有趣的属性。谢谢你!您的意思可能是:
$(this).parent('label').css('background','00CC66')完全正确。。这将是一个更好的解决方案您的解决方案会改变所有
标签
元素的背景您可能的意思是:
$(this).parent('label').css('background','00CC66')完全正确。。这将是一个更好的解决方案您的解决方案将改变所有
label
元素的背景