如何使用JQuery更改悬停复选框上的CSS样式

Question

All I am trying to do is have my checkbox change it's background colour when you hover over it. However, this is made more complicated by the fact that the td input:checkbox is dynamically created. I have tried every conceivable approach and I can not get it right. Here is the JQuery I have:

/* snip */
    $('.table_products').on('click', 'td input:checkbox', function () {

    $("input:checkbox").hover(function(){
        $(this).css({"backgroundColor": "yellow"});
    }, function(){
        $(this).css({"backgroundColor": "white"});
    });
/* snip */

Answer 1

Maybe it isn't possible to change the color inside the checkbox square but you can trick as @gavgrif said. I just hover when you pass on the checkbox (not on the entire td):

$("input[type='checkbox']").hover(function(){
  $(this).closest(".wrapper").css("background-color", "yellow");
}, function(){
  $(this).closest(".wrapper").css("background-color", "white");
});

Probably your selector was worng too (the correct way to declare is into []).

I just wrapped the checkbox but you can use your current parent:

  <div class="wrapper">
    <input type="checkbox"/>
  </div>

Plunker: https://plnkr.co/edit/5V5cUysB9E0SYGMddFKl?p=preview