JSFiddle - React, Tailwind, and code Playground

by Marco

HTML

<div class="outer" id="parent">
            OUTER
            <div class="inner" id="child">INNER</div>    
        </div>

CSS

.outer {
	background: green;
	height: 50px;
	margin-top: 50px;
 }

 .inner {
	display: none;
	background: blue;
	height: 50px;
	width: 300px;
	position: absolute;
	left: 8;
	top: 25;
 }

JavaScript

$(document).on('mousemove',function(event){
	 if(isOver($('div.outer'), event )){
		 $('div.inner').css('display','block')
		 }else{
			$('div.inner').css('display','none') 
			 }
	  })
   function isOver( element, e ) {
		var left = element.offset().left,
			top = element.offset().top,
			right = left + element.width(),
			bottom = top + element.height();
		return ( e.pageX > left && e.pageX < right && e.pageY > top && e.pageY < bottom );
  };