Javascript optimisation Event Listener for multiple time the same effect


I want something that when I have a addEventListener(‘mouseover’) it affect the two element next to him.

Like this:

let three = document.getElementById('three');
let six = document.getElementById('six');

intersection3_6.addEventListener("mouseover", function () {
intersection3_6.addEventListener("mouseout", function () {
#table {
  display: grid;
  grid-template-columns: 50px 50px;
  grid-template-rows: 50px 50px;

#controls {
  position: absolute;
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: 44px 12px 44px;
  grid-template-rows: 50px;
  pointer-events: none;

#intersection3_6 {
  pointer-events: all;
  background-color: red;
  grid-column-start: 2;

.hover {
  background-color: aqua;
<div id="table">
  <button id="three"><span>3</span></button>
  <button id="six"><span>6</span></button>
  <div id='controls'>
    <div class='vertical' id='intersection3_6'></div>

It work but obviously when I have something like this with multiple intersections it’s getting boring and not optimised to repeat myself everytime (we can just concentrate on the first row where the purple intersections are)
enter image description here

Is there a way to say something like ‘take the one on your left and the one on your right and do the thing’ ?


Loop over all the elements with the same class, and use DOM navigation operations to reach the elements next to the event target.

document.querySelectorAll(".vertical").forEach(int => {
    int.addEventListener('mouseover', (e) => {
        let table =;
    int.addEventListener('mouseout', (e) => {
        let table =;

Answered By – Barmar

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published