2016-04-21 1 views
0

Alles, was ich mein Kontrollkästchen ist die Veränderung zu tun versuchen hat es Farbe Hintergrund, wenn Sie den Mauszeiger über sie. Dies wird jedoch dadurch erschwert, dass die td input:checkbox dynamisch erstellt wird. Ich habe jede erdenkliche Herangehensweise versucht und ich kann es nicht richtig machen. Hier ist die JQuery Ich habe:Wie mit JQuery CSS Styling auf einer Checkbox auf Hover ändern

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

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

wenn es dynamisch Verwendung '$ (document) .auf ('Hover', 'Kennung' anlegen , function() { ' – Zak

+1

Ihr Code macht Sinn für mich, aber ich denke, das Problem ist, dass die Checkbox Stile nicht bearbeitet werden können. Siehe http://stackoverflow.com/a/24322691/1601698. Styling Kontrollkästchen beinhalten eine Menge von Hacking –

+0

@smerny, 'backgroundColor' ist der Name der JavaScript-Eigenschaft und es ist absolut gültig für die Verwendung in jQuery –

Antwort

2

Vielleicht ist es nicht möglich, die Farbe innerhalb der Checkbox Platz zu ändern, aber Sie können Trick wie @gavgrif sagte. Ich schweben nur, wenn Sie auf das Kontrollkästchen passieren (nicht auf der gesamten td):

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

Wahrscheinlich die Wähler auch wurde worng (der richtige Weg ist in [] zu erklären).

Ich wickelte nur das Kontrollkästchen, aber Sie können Ihre aktuell Eltern verwenden:

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

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

+0

Dank f oder deine Hilfe. Mir war nicht bewusst, dass Checkboxen nicht bearbeitet werden können. Ihre Lösung war jedoch ein praktikabler Kompromiss. Im Wesentlichen wird die richtige Zeile hervorgehoben, wenn Sie den Mauszeiger über das Kontrollkästchen bewegen. Vielen Dank ! – Vince