Change Color of Div using Jquery

Here colors are changing on different events like hover, click, focus, etc using JQUERY

by Amulya Kashyap

HTML

<div id="div1">CSS Pseudo Classes (not cross browser) :hover :active</div>
<div id="div2">jQuery Click to CSS</div>
<div id="div3">jQuery Click to CSS</div>
<div id="div4">jQuery Click to Toggle</div>
<div id="div5">jQuery Mousedown/MouseUp</div>
<div id="div6">jQuery Toggle</div>

CSS

div {
    background-color: green;
    border: 3px groove;
    cursor: pointer;
    margin: 1em;
    padding: 1em;
    text-align: center;
}

.back-green {
    background-color: green;
}

.back-red {
    background-color: red;
}

#div1:hover {
    background-color: yellow;
}

#div1:active {
    background-color: red;
}

JavaScript

$("#div2").on("click", function() {
    $(this).css("background-color", "red");
});

$("#div3").on("click", function() {
    $(this).css({
        backgroundColor: "red"
    });
});

$("#div4").on("click", function() {
    $(this).toggleClass('back-red');
});

$("#div5").on("mousedown", function() {
        $(this).toggleClass('back-red');
    })
    .on("mouseup", function(e) {
        $(this).toggleClass('back-red');
    });

$("#div6").toggle(function() {
        $(this).css("background-color", "red");
    },
    function() {
        $(this).css("background-color", "");
    });