JSFiddle - React, Tailwind, and code Playground

by mich

HTML

<div id="wrap">
    <div id="area">
    </div>
</div>
<div id="log"></div>

CSS

body { padding: 20px; }
#wrap {
    width: 200px;
    background-color: darkgrey;
    padding: 100px;
    height: 200px;
}
#area {
    height: 200px;
    background-color: red;
}

.wrap { color: darkgrey; }
.area { color: red; }

JavaScript

$('#wrap').mouseenter(function(event) {
    $('#log').prepend('<div class="wrap">wrap mouse ENTER</div>');
}).mouseout(function(event) {
  $('#log').prepend('<div class="wrap">wrap mouse OUT</div>');
});

$('#area').mouseenter(function(event) {
    $('#log').prepend('<div class="area">area mouse ENTER</div>');
}).mouseout(function(event) {
  $('#log').prepend('<div class="area">area mouse OUT</div>');
});