JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="parent">
    <div id="child">
        &nbsp;
    </div>
</div>

CSS

#parent {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: blue;
    z-index: 1;
}

#child {
    position: absolute;
    bottom: 0;
    height: 100px;
    width: 500px;
    background-color: red;
    z-index: 2;
    opacity: 0.5;
}

JavaScript

$(document).ready(function() {
    $('#parent').on('mouseout', function() {
        alert('Mouse out!');
    });
});