JSFiddle - React, Tailwind, and code Playground

by the94air

HTML

<div onmouseleave="trigger('You are out of #OuterBox')" onmouseenter="trigger('You are in #OuterBox')" id="outerBox">OuterBox
    <div onmouseleave="trigger('You are out of #innerBox', 'and you should assume that you are in #OuterBox because there is another event (onmouseleave) for the #OuterBox')" onmouseenter="trigger('You are in #innerBox')" id="innerBox">InnerBox</div>
</div>

<div id="location"></div>

CSS

#outerBox {
  background: #e2e8f0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}
#innerBox {
  background: #a0aec0;
  width: 100px;
  height: 100px;
}

JavaScript

function trigger(describe, addition) {
	let location = document.getElementById('location');
  addition = addition || '';
  location.innerText = describe + ' ' + addition;
}