JSFiddle - React, Tailwind, and code Playground

by Michiel Helvensteijn

HTML

<div id="a" style="width: 300px; height: 200px;">
    <div id="b" style="width: 200px; height: 150px; ">
        <div id="c" style="width: 100px; height: 100px;">
        </div>
    </div>
</div>

CSS

div {
    position: absolute;
    top: 35px;
    left: 15px;
    border: solid 1px black;
    background-color: white;
}

JavaScript

function onMouseEnter(event) {
    event.stopPropagation();
    $(this).css('backgroundColor', '#a0adff');
}

function onMouseLeave(event) {
    event.stopPropagation();
    $(this).css('backgroundColor', 'white');
}

/*
$('#a').on('mouseenter', onMouseEnter);
$('#b').on('mouseenter', onMouseEnter);
$('#c').on('mouseenter', onMouseEnter);

$('#a').on('mouseleave', onMouseLeave);
$('#b').on('mouseleave', onMouseLeave);
$('#c').on('mouseleave', onMouseLeave);
*/

$('#a').on('mouseover', onMouseEnter);
$('#b').on('mouseover', onMouseEnter);
$('#c').on('mouseover', onMouseEnter);

$('#a').on('mouseout', onMouseLeave);
$('#b').on('mouseout', onMouseLeave);
$('#c').on('mouseout', onMouseLeave);