JSFiddle - React, Tailwind, and code Playground

by JBDouble05

HTML

<div id="parent">
  <div id="child-left"></div>
    <div id="child-right"></div>
</div>

SCSS

#parent {
background: green;
width: 100px;
height: 100px;
position: relative;
margin: 0 auto;
&:hover {
  background: rgba(0,0,0,0.8);
}
#child-left {
  background: red;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  left: -50px;
}
#child-right {
  background: red;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50px;
left: 100px;
}
}

JavaScript

const parent = document.getElementById('parent')
parent.onmouseover = function testAlert(e) {
/* alert('parent') */
}
const childRight = document.getElementById('child-right')
childRight.onmouseover = function f(e) {
e.stopPropagation()
/* alert('child-right') */
}
const childLeft = document.getElementById('child-left')
childLeft.onmouseenter = function f(e) {
e.stopPropagation()
/* alert('child-right') */ 
}