この場合、より美しい解決法はありますか？

Question

ブロックタブでマウスを動かすと、3つのブロックすべての色が変わりました。デモ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

より美しくソリューションは、このように、CSSでhover擬似要素を使用することです：element:hover {styles here}。あなたの単純なケースにはかなり良いことです。

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

Answer 2

CSSで「ホバー」プロパティを使用できます。

div:hover{ 
    color: #FF0000; 
}