JSFiddle - React, Tailwind, and code Playground

by lovinglobo

HTML

<div class="parent"  onmouseover="parentMouseOver(event)" onmouseleave="parentMouseLeave(event)">
  <div class="child" onmouseover="childMouseOver(event)">
  </div>
</div>

CSS

.parent {
   background-color:red;
   width: 250px;
   height: 250px;
}

.parent:hover {
   background-color: green;
}

.child {
  background-color: black;
  width: 20px;
  height: 20px;
}

.child:hover {
  background-color: green;
  width: 20px;
  height: 20px;
}

JavaScript

function childMouseOver(e) {
	console.log(e.target.parentElement);
  e.target.parentElement.dispatchEvent(new Event('mouseleave'));
  e.stopPropagation();
  e.preventDefault();
}

function parentMouseOver(e) {
	console.log("got parent mouse over");
}

function parentMouseLeave(e) {
	console.log("got parent mouse leave");
}