JSFiddle - React, Tailwind, and code Playground

by Ranganadh Paramkusam

HTML

<div class="green">Green</div>
<div class="yellow">Yellow</div>
<div class="red">Red</div>
<label id="lbl"></label>

CSS

div{
    width:500px;
    height:30px;
    text-align:center;
    padding-top:10px;
}
.red{
    background:red;
}
.yellow{
    background:yellow;
}
.green{
    background:green;
}

JavaScript

gr_count = ye_count = re_count = 0;
$(document).ready(function(){
    $("div").hover(function(){
        switch($(this).attr("class")){
            case "green":
                gr_count++;
                break;
            case "yellow":
                ye_count++;
                break;
            case "red":
                re_count++;
                break;
            default:
                alert("nothing");
        }
            $("#lbl").html("Hover on green div : "+gr_count+"<br />"+"Hover on yellow div : "+ye_count+"<br />"+"Hover on red div : "+re_count);
    });
});