JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent1" class="parent">
    <div id="child1" class="child">
    </div>
</div>
<div id="parent2" class="parent">
    <div id="child2" class="child">
    </div>
</div>
<div id="txt"></div>

CSS

.parent {
    padding: 20px;
    background: red;
    display: inline-block;
}

.child {
    width: 100px;
    height: 100px;
    background: blue;
}

JavaScript

$("#parent1").on("mouseover", function(event) {
    $("#txt").append(event.target.id + "<br>");
});


$("#parent2").on("mouseover", function(event) {
    $("#txt").append(event.target.id + "<br>");
});

$("#parent2 > *").on("mouseover", function(event) {
    event.stopPropagation();
});