JSFiddle - React, Tailwind, and code Playground

by tea4two

HTML

<div class="over"></div>
<div class="target">OFF</div>

CSS

.over {
    width: 100px;
    height: 100px;
    background-color: blue;
}
.target {
    background: skyblue;
    font-size: 160%;
    padding: 10px;
}
.on {
    background: pink;
}

JavaScript

$(function () {
    $('.over').on({
        'mouseenter': function () {
            $('.target').addClass('on');
        },
            'mouseout': function () {
            if ($('.target').hasClass('on')) {

                $('.target').removeClass('on');
            }
        }
    });
});