jquery - $().toggleClass(); not working -

here fiddle. trying make own checkbox using <div>, , applying colors $().css(). when click div, trying use $().toggleclass() in click function change background-color #96f226

jquery:

$('div').mouseenter(function(){     $(this).css('background','#656565'); }); $('div').mouseleave(function(){     $(this).css('background','#4a4a4a'); }); $('div').click(function(){     $(this).toggleclass('active'); }); 

html:

<div></div> 

css:

div {     width: 15px;     height: 15px;     background: #4a4a4a;     cursor: pointer; } .active {     background: #96f226 } 

with .css call 'background' property, change corresponding inline style of element, specified attribute. in other words, mouseenter handler turns <div> <div style="background: ##656565">. mouseleave works similar way, it's value of style attribute different.

the problem style rule set in way - within style attribute - has highest specificity 1 applied result of class-match rule (or combination of selectors) given in css ruleset.

that's why don't see changes when class active added element (and it's easy check class added indeed; it's rule that's not accounted).

that problem quite easy fix if remove fiddling inline styles altogether, , use class - mouseenter handler set, , mouseleave remove.

but actually, don't need that: events you're trying process handled browser, in quite way. it's easy leverage: set style rules :hover pseudo-class, this:

div:hover {     background: #656565 } div.active, div.active:hover {     background: #96f226 } 

and here's fiddle play with.