JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer">Outer
    <div id="inner">Inner</div>
</div>
<a id="clear" href="#">Clear</a>
<ul id="messages"></ul>

CSS

div { border: 1px solid black; padding: 20px; }

JavaScript

$("#outer").bind({
    mouseover: function () {
        $("#messages").append("<li>mouseover</li>");
    },
    mouseout: function () {
        $("#messages").append("<li>mouseout</li>");
    },
    mouseenter: function () {
        $("#messages").append("<li>mouseenter</li>");
    },
    mouseleave: function () {
        $("#messages").append("<li>mouseleave</li>");
    }
});

$("#clear").click(function () {
    $("#messages").empty();
});