JSFiddle - React, Tailwind, and code Playground

by tonyleeper

HTML

<div class="square"></div>

CSS

.square {
    background-color: red;
    width: 100px;
    height: 100px;
}

.square:hover, .square.hover {
    background-color: green;
}

JavaScript

$(".square").mouseenter(function (event) {
    $(this).addClass("hover");
});

$(".square").mouseleave(function (event) {
    $(this).removeClass("hover");
});