制作CSS的JavaScript函数：悬停不正常

Question

使用功能后，文字颜色在悬停时不会改变。

我有以下<div>：

<div class="test" id="test_id" onClick="tempFunc()">HELLO</div>

以上行的CSS：

.test {     
    font-family: 'CenturyGothicRegular', sans-serif;
    font-size: 0.8vw;
    color: white;
}

.test:hover {   
    color: orange;  
}

最重要的是按预期工作。

文字颜色以白色开始，悬停变为橙色。单击时，将打开tempFunc（）。在该函数中，该行被传递：

function tempFunc() {   
   document.getElementById('test_id').style.color = "orange";
}

这会将颜色改为橙色。当用户点击另一个按钮时：

<div class= home" id="home_id" onClick="homeFunc()">CLOSE</div>

function homeFunc() {   
   document.getElementById('test_id').style.color = "white";
}

问题 - 在此之后，CSS 测试：悬停将被完全忽略。悬停在“HELLO”上时没有任何反应，颜色仍然是白色。