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.
solved How to change the element of another div by clicking and hovering on an element of a different div