JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div1"></div>
 <br /> <br /> <br /> <br /> <br />
 <div id="div2"></div>

CSS

#div1, #div2
{
    width:200px;
    height:200px;
}
#div1 { background:#008000; }
#div2 { background:#000080; }
#div1.active { background:#00ff00; }
#div2.active  { background:#0000ff; }

JavaScript

function ge(id){ return document.getElementById(id); }
function onover(){ ge('div1').className = "active"; ge('div2').className = "active"; }
function onout(){ ge('div1').className = ""; ge('div2').className = ""; }


ge('div1').onmouseover = onover;
ge('div2').onmouseover = onover;
ge('div1').onmouseout = onout;
ge('div2').onmouseout = onout;