JSFiddle - React, Tailwind, and code Playground

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", "");
    });