JSFiddle - React, Tailwind, and code Playground

HTML

<div id="primeiro"><div id="segundo"></div></div>

<div id="efeito"></div>

CSS

#primeiro{
  width: 300px;
  height: 300px;
  background: red;
   float: left; 
}
#segundo{
  width: 150px;
  height: 150px;
  background: green;
  margin: auto; 
}
#segundo:hover #efeito{
  background: blue;
}
#efeito{
  width: 90px;
  height: 90px;
  background: pink;
  float: left; 
}

JavaScript

var segundo = document.getElementById("segundo");
var efeito = document.getElementById("efeito");

segundo.addEventListener("mouseover", mouseOver);
segundo.addEventListener("mouseout", mouseOut);

function mouseOver() {
    efeito.style.background = "blue";
}

function mouseOut() {
    efeito.style.background = "pink";
}