JSFiddle - React, Tailwind, and code Playground

HTML

<div id="one">
    <div id="two"></div>
</div>

CSS

#one{
    width: 400px;
    height: 400px;
    background-color: grey;
    position: relative;
}
#two{
    width: 200px;
    height: 200px;
    background-color: brown;
    position: absolute;
    left: 100px;
}

JavaScript

var block1 = document.getElementById('one');
var block2 = document.getElementById('two');
block1.addEventListener('mouseover', function(event){
    block1.style.backgroundColor = 'black';
});
  
block1.addEventListener('mouseout', function(event){;
    block1.style.backgroundColor = 'yellow';
});

block2.addEventListener('mouseover', function(event){
    event.stopPropagation();
    block2.style.backgroundColor = 'green';
});

block2.addEventListener('mouseout', function(event){
    block2.style.backgroundColor = 'brown';
});