JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<div id="container1" class="container">
    <div id="child1" class="child">Some text...</div>
</div>

CSS

div { border:1px dashed red; } /* for demo */

.container
{ height: 200px;
  width: 500px;
}

.child
{ height: 90%;
  width: 90%;
}

.insensitive
{ pointer-events:none;
}

.container:hover:not(.no-hilight),
.child:hover
{ background-color:yellow;
}

/* other color for demo */
.child:hover{ background-color:green; }

JavaScript

// make events passthrough child when <Ctrl> is held down
$(document).on('keydown keyup', function(ev) {
    if (ev.key === 'Control') // for performance
        $('.child')[ev.ctrlKey?'addClass':'removeClass']('insensitive');
});

// don't hilight container when child is hovered
$('.child').on('mouseover', function(ev)
{ 
  $('.container').addClass('no-hilight');
});

// don't suppress hilight when container is hovered directly
$('.container').on('mouseover', function(ev)
{ if(ev.target === ev.currentTarget)
    $('.container').removeClass('no-hilight');
});

// just test which element a click is targeted to
$(document).on('click', function(ev)
{ console.log('click:', ev.target);
});