ラベルフォーカスはCSSスタイルを変更しません

Question

シンプルなフォームを持ち、背景色を変更してフォーカスラベルを強調したいのですが、ここで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> 

私は実際にクラスを追加/削除することでそれを終えることができましたが、なぜこれが機能していないのでしょうか？

Answer 1

なぜjsをCSSで使用できるのですか？

label:focus { 
    background-color: #00cc66; 
} 

あなた例えばかのようにあなたも、あなたががフォーカス可能であるためにあなたのlabel要素をしたい場合tabindex=0を追加しますラベルをクリックして、フォーカスは、あなたが以下のようにCSS次の兄弟セレクタを使用することができ、

また、関連input要素に移動されます。

HTML：

<input type="text" id="foo" class="foo"><label for="foo">label</label> 

とCSS：

.foo:focus + label { 
    background-color: #00cc66; 
} 

または異なるマークアップとCSSセレクタ

と遊びますあなたがラベルにフォーカスを使用することはできませんよう

Answer 2

はこれを試す -

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

Answer 3

あなたはここに

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

または

をチェックし、 inputでそれを行う代わりに、 .focus()を使用してラベルにフォーカスをトリガすることはできません

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