JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
  <span class="child">
  
  </span>
</div>

CSS

.parent {
  width: 200px;
  height: 200px;
  background-color: cornflowerblue;
}

.child {
  width: 100px;
  height: 100px;
  background-color: white;
  display: none;
}

.parent:hover .child {
  display: block;
}

JavaScript

$(document)
		.on("click", ".parent", function() { alert("parent"); })
		.on("click", ".child", function(e) { alert("child"); e.stopPropagation(); })