JSFiddle - React, Tailwind, and code Playground

by jbabey

HTML

<div id="outer">
    <div id="inner">
    </div>
</div>

CSS

#outer {
    width: 400px;
    height: 400px;
    z-index: 1;
    background-color: blue;
    display: block;
}

#inner {
    width: 200px;
    height: 200px;
    z-index: 2;
    background-color: red;
    display: block;
}

.green {
    background-color: green !important;   
}

JavaScript

$('#outer').mouseover(function () {
    $(this).addClass('green');
});
$('#outer').mouseout(function () {
    $(this).removeClass('green');
});

$('#inner').mouseover(function () {
    return false;
});
$('#inner').mouseout(function () {
    return false;
});