Like people have said there are many ways to do this. One way would be to use JavaScript event listeners. Here’s a quick little demo:
let change = document.getElementById("change");
let hover = document.getElementById("hover");
hover.addEventListener("mouseover", changeColor);
hover.addEventListener("mouseout", changeColor);
function changeColor() {
change.classList.toggle("red");
}
div {
width: 100px;
height: 100px;
margin: 2rem;
background-color: green;
}
.red {
background-color: red;
}
<div id="change">
Change Me
</div>
<div id="hover">
Hover Me
</div>
Good luck! I’d definitely recommend on reading up on event listeners if you’re not already familiar with them.