How do I listen to mouseover and mouseout events in 3 elements in a more DRY way?

Question

I'm applying some animations to a navbar through JS but I'm probably repeating myself a lot in the event listening part.

But I can't find a way to improve it.

Is there a way I can use a loop or something in order to listen to all these events without writing a code block for each one?

let headerHome = document.querySelector('.headerHome');
let headerPlayground = document.querySelector('.headerPlayground');
let headerAbout = document.querySelector('.headerAbout');

headerHome.addEventListener('mouseover', () => {
    headerHome.classList.add('mouseOverHeader');
})

headerHome.addEventListener('mouseout', () => {
    headerHome.classList.remove('mouseOverHeader');
})

headerPlayground.addEventListener('mouseover', () => {
    headerPlayground.classList.add('mouseOverHeader');
})

headerPlayground.addEventListener('mouseout', () => {
    headerPlayground.classList.remove('mouseOverHeader');
})

headerAbout.addEventListener('mouseover', () => {
    headerAbout.classList.add('mouseOverHeader');
})

headerAbout.addEventListener('mouseout', () => {
    headerAbout.classList.remove('mouseOverHeader');
})

.header-menu{
    display: flex;
    justify-content: flex-start;
    list-style-type: none;
    flex-direction: column;
    margin: 1em 0 0 2em;
}

.header-menu div{
    margin-right: 2em;
    transition: transform 1s;
    transition: padding-right 1s;
    transform-origin: left;
}

.header-menu a{
    text-decoration: none;
    color: inherit;
    display: inline-block;
}

.mouseOverHeader{
    transform: scale(1.1);
    padding-right: 4em;
}

<nav class="header-menu">
      <div class="headerHome"><a href="/index.html">Home</a></div>
      <div class="headerPlayground"><a href="/playground.html">Playground</a></div>
      <div class="headerAbout"><a href="/about.html">About</a></div>
    </nav>

Answer 1

One way to do what you are seeking is to add a class to everything you want to make hoverable and use querySelectorAll. Here is what the html will look like:

<nav class="header-menu">
  <div class="hoverable headerHome"><a href="/index.html">Home</a></div>
  <div class="hoverable headerPlayground"><a href="/playground.html">Playground</a></div>
  <div class="hoverable headerAbout"><a href="/about.html">About</a></div>
</nav>

And your JavaScript will look like this:

let hoverable = document.querySelectorAll('.hoverable');
hoverable.forEach((hoverableElement) => {
  hoverableElement.addEventListener('mouseover', (event) => {
    hoverableElement.classList.add('mouseOverHeader');
  });
  hoverableElement.addEventListener('mouseout', (event) => {
    hoverableElement.classList.remove('mouseOverHeader');
  });
});

Keep your CSS the same.

This works, but the far simpler way is to update your css to use the :hover pseudo class like this:

.header-menu a:hover {
    transform: scale(1.1);
    padding-right: 4em;
}

This does what you want without having to add JavaScript at all.