在这种情况下，是否有更美观的解决方案？

Question

将鼠标悬停在块选项卡上时，所有三个块的颜色都会发生变化。演示https://jsfiddle.net/nf3q223z/

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

我的解决方案是：https://jsfiddle.net/nf3q223z/1/

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

有效。这是正确的，正确的方法吗？还是有一个更美丽的解决方案？

Answer 1

您可以使用＆＃39; hover＆＃39; CSS中的属性。

div:hover{
  color: #FF0000;
}

Answer 2

更美妙的解决方案是在CSS中使用hover伪元素，如下所示：element:hover {styles here}。这对你的简单案例很有帮助。

＆＃13;

＆＃13;

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

.my:hover {
  color: red
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;