<div class="red"></div>

<div class="yellow"></div>

body {
  display: flex;
}

.red {
  width: 300px;
  height: 300px;
  background: red;
}

.red.green {
  background: green;
}

.yellow {
  width: 300px;
  height: 300px;
  background: yellow;
}

.yellow:hover {
  background: blue;
}

const block = document.querySelector('.red');
block.onmouseover = function() {
  this.classList.add('green');
}
block.onmouseout = function() {
  this.classList.remove('green');
}