JSFiddle - React, Tailwind, and code Playground

HTML

Start by clicking and holding your mouse out here!!!

<div id="testy">
    Then drag your mouse in here, the background will change to green if the "mouseenter" fired, and back to pink on "mouseleave".
    
    Neither event fires while the mouse is down though.
    <br>
        <br>
      <textarea>
this gets interesting though. try starting a drag here. then drag the mouse outside the box, then back in, and move the mouse around in here, it shuold add a single "." to the box for each "mouseenter" and you can easily get a situation where it prints a ton of dots while mousing around         
            </textarea>
</div>

CSS

html,body {
    height: 100%;
}
textarea {
    width: 100%;
    height: 4em;
}
#testy {
    position: absolute;
        left: 40px;
    right: 40px;
    top: 40px;
    bottom: 40px;
    background: pink;
}

JavaScript

var div = $('#testy');

div.on('mouseenter', function() {
    div.css('background', 'green');
    div.append('. ');
});
div.on('mouseleave', function() {
    div.css('background', 'pink');
});