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');
block1.addEventListener('mouseover', function(event){
    console.log('MouseOver. | Target: ', event.target, '| Related Target: ', event.relatedTarget);
    block1.style.backgroundColor = 'black';
});
  
block1.addEventListener('mouseout', function(event){
    console.log('MouseOut.  | Target: ', event.target, '| Related Target: ', event.relatedTarget);
    block1.style.backgroundColor = 'yellow';
});