JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent">

<div id="child">
    
</div>

</div>

CSS

#parent{
 background-color:red;
width:100px;
 height:100px;   
    position:relative;
}


#parent:hover #child {
    display:block;
    
}
#child{
 background-color:yellow;  
width:10px;
height:10px;  
    border: 1px solid black;
    position:absolute;
    display:none;
    bottom:0;
    right:0;
}

JavaScript

$("#parent").bind("click", function() {
  alert('you clicked on red');
   
});

$("#child").bind("click", function() {
  alert('you click on yellow');
    
});