QgRKQy

index.html

<div class="row">
  <div class="box" id="box1"></div>
  <div class="box" id="box2"></div>
</div>
<div class="row">
  <div class="box" id="box3"></div>
  <div class="box" id="box4"></div>
</div>
  

qgrkqy.markdown

QgRKQy

A Pen by Tyler on CodePen.

License.

script.js

var boxes = document.querySelectorAll('.box');
for (box of boxes) {
  box.addEventListener('mouseenter', function (e) {
    e.target.classList.add('active');
  });
                       box.addEventListener('mouseleave', function (e) {
  e.target.classList.remove('active');                   
  });
}

style.css

.box {
  width:50px;
  height: 50px;
  margin: 5px;
}

.row {
  display: flex;
}

#box1 {
  background-color:red;
}
#box2 {
  background-color:red;
}
#box3 {
  background-color:green;
}
#box4 {
  background-color:green;
}

.active {
  background-color:blue!important;
}