Gibt es in diesem Fall eine schönere Lösung?

Question

Wenn Sie die Maus über die Blockregisterkarte bewegen, ändert sich die Farbe aller drei Blöcke. Demo https://jsfiddle.net/nf3q223z/

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

Meine Lösung ist dies: https://jsfiddle.net/nf3q223z/1/

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

Es funktioniert. Ist das ein korrekter und richtiger Weg? Oder gibt es eine schönere Lösung?

Answer 1

Die schönere Lösung ist hover Pseudo-Element in CSS zu verwenden, wie folgt aus: element:hover {styles here}. Es ist ziemlich gut für deinen einfachen Fall.

#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

Sie können die Eigenschaft 'Hover' in CSS verwenden.

div:hover{ 
    color: #FF0000; 
}