JavaScript function making CSS :hover not function correctly [duplicate]

Text color wont change on hover once function is used.

I have the following <div>:

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

CSS for the above line:

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

.test:hover {   
    color: orange;  
}

Above all works as expected.

Color of text starts as white, hover changes to orange. When clicked, it opens tempFunc(). In that function this line is passed:

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

That will change the color to orange fine. When user clicks another button:

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

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

Problem - After that happens the CSS test:hover is completely ignored. Nothing happens when hovering over "HELLO", color remains white.