JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div id="outer">
<div id="border">
<div id="inner">

</div>
</div>
</div>

CSS

#outer {
  padding:50px;
  width:200px;
  height: 200px;
  background-color: #FFFFFF;
}

#border {
  border: 1px solid black;
  width:100%;
  height:100%;
}

#inner {
  display: none;
  width:100%;
  height:100%;
  background-color: #CC0000;
}

JavaScript

$("#outer").hover(function(){
	show();
}, function(){
	hide();
});

function show()
{
	$("#inner").css('display', 'block');
  $("#inner").on('click', function(){
  	alert('hello');
  });
}

function hide()
{
	$("#inner").css('display', 'none');
  $("#inner").off('click');
}