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

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

更美丽解决方案是使用hover伪元素的CSS，像这样：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; 
}