JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tab">
  <div class="my" id="sh1">one</div>
  <div class="my" id="sh2">two</div>
  <div class="my" id="sh3">three</div>
</div>
<br><div id="test1"></div>
<br><div id="test2"></div>
<br><div id="test3"></div>

CSS

#tab{
  padding: 20px 20px 20px 20px;
  border: 1px solid black;
}
.my{
    font-size: 160%;
}

JavaScript

document.getElementById('tab').onmouseover=function (e) {
  if(e.target.id != 'tab'){
    document.getElementById(e.target.id).style.color = 'red';
  }
}
document.getElementById('tab').onmouseout=function (e) {
  document.getElementById(e.target.id).style.color = '';
}