How to change the element of another div by clicking and hovering on an element of a different div

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() {
div {
  width: 100px;
  height: 100px;
  margin: 2rem;
  background-color: green;

.red {
  background-color: red;
<div id="change">
  Change Me

<div id="hover">
  Hover Me

Good luck! I’d definitely recommend on reading up on event listeners if you’re not already familiar with them.

Browse More Popular Posts

Leave a Comment