JSFiddle - React, Tailwind, and code Playground

HTML

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

<br>
<br>

<div class="log"></div>

CSS

.log {
             color: green;
             position: absolute;
             left: 530px;
             top: 10px;
         }

        .outer {
            width: 500px;
            height: 500px;
            background: #ffc0cb;
            position: absolute;
            top: 10px;
            left: 10px;
        }

        .inner {
            width: 200px;
            height: 200px;
            background: #f5f5dc;
            position: absolute;
            top: 100px;
            left: 100px;
        }

JavaScript

$(document).ready(function(){
/*
            $('.outer').bind('mouseover', function(){
                log('outer mouseover');
            });

            $('.outer').bind('mouseout', function(){
                log('outer mouseout');
            });

            $('.inner').bind('mouseover', function(){
                log('inner mouseover');
            });

            $('.inner').bind('mouseout', function(){
                log('inner mouseout');
            })
*/
            $('.outer').bind('mouseleave', function(){
                log('outer mouseleave');
            });

            $('.outer').bind('mouseenter', function(){
                log('outer mouseenter');
            });

            $('.inner').bind('mouseleave', function(){
                log('inner mouseleave');
            });

            $('.inner').bind('mouseenter', function(){
                log('inner mouseenter');
            });

        });

        function log(message){
            $('.log').html($('.log').html() + message);
            $('<br>').appendTo($('.log'));
        }