JSFiddle - React, Tailwind, and code Playground

HTML

<div class='parent unique-class-for-target'>
    <div class='child'>
    </div>
</div>

CSS

.parent {
    background-color: #97a;
    width: 200px;
    height: 200px;
}

.child {
    background-color: #dd4;
    width: 100px;
    height: 100px;
}

JavaScript

var parentOn = function(e) {
    e.target.parentNode.style.backgroundColor = '#9d7';
}
var parentOff = function(e) {
    e.target.parentNode.style.backgroundColor = '#97a';
}

var children = document.querySelectorAll('.child');

for (var x = 0; x < children.length; x ++) {
    children[x].addEventListener('mouseover', parentOn);
    children[x].addEventListener('mouseout', parentOff);
};