JSFiddle - React, Tailwind, and code Playground

HTML

<div id='wrapper'>
     <div id='first'>Hover over first</div>
     <div id='second'>To black out second</div>
</div>

<div id='wrapper2'>
     <div id='third'>Hover over third</div>
</div>
<div id='fourth'>To black out fourth</div>

CSS

#first:hover ~ #second
{
     background:#000;
}

.blackout {
    background:#000;
}

JavaScript

var third = document.getElementById('third'),
    fourth = document.getElementById('fourth');

third.addEventListener('mouseover', function () {
    fourth.className = "blackout"
});
third.addEventListener('mouseout', function () {
    fourth.className = "";
});