javascript - Is there a more beautiful solution in this case? -

when hover mouse on block tab, color of 3 blocks changed. demo https://jsfiddle.net/nf3q223z/

document.getelementbyid('tab').onmouseover=function (e) {   document.getelementbyid(e.target.id).style.color = 'red'; } 

my solution this: https://jsfiddle.net/nf3q223z/1/

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

it works. correct, correct way? or there more beautiful solution?

the more beautiful solution use hover pseudo element in css, this: element:hover {styles here}. it's pretty simple case.

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

<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>