Dodawanie klasy do poszczególnych elementów Nodelist

Witam, w jaki sposób dodać klasę do jednego konkretnego (najechanego myszką) elementu?
Udało mi się dodać klasę, ale do wszystkich naraz i mam problem z konkretnymi najechanymi

const imgs = document.querySelectorAll(".blue-btn");

[ ].forEach.call(imgs, (e) => {
console.log(e);
e.classList.add("active");

});

co pokazuje console.log(e)?
dlaczego w parametrze lambdy przekazujesz 2 parametry i odwołujesz się tylko do jednego, tego drugiego?
czemu wywołujesz to na pustej tablicy?
co tutaj robi .call?

Po prostu nie wiem jak selektywnie dodać klasę do konkretnego elementu. Nie miałem już pomysłu na to, a ten kod jest z któregoś forum. Dodaje klasę , ale do wszystkich elementów.
Myślałem nad tym aby dodać klasę active do elementu, i jednocześnie odejmować ją od pozostałych elementów. W ten sposób sie to robi ? Dopiero zacząłem naukę js'a

1. Po co chcesz dodawać klasę do elementu, na który najechałeś myszką? Jeżeli chcesz nadać mu styl, to jest od tego selektor CSS:

.blue-btn:hover {
  background: black;
}

2. JavaScript dorobił się forEach na NodeList, więc nie trzeba robić tak jak Ty zrobiłeś (używać call):

const imgs = document.querySelectorAll(".blue-btn");
imgs.forEach(element => {
  e.classList.add("active");
});

3. Jeżeli chcesz dodać klasę do elementu przy najechaniu myszką:

const imgs = document.querySelectorAll(".blue-btn");
imgs.forEach(element => {
  element.addEventListener('mouseover', e => e.classList.add("active"));
});

Desu napisał(a):

1. Po co chcesz dodawać klasę do elementu, na który najechałeś myszką? Jeżeli chcesz nadać mu styl, to jest od tego selektor CSS:

.blue-btn:hover {
  background: black;
}

2. JavaScript dorobił się forEach na NodeList, więc nie trzeba robić tak jak Ty zrobiłeś (używać call):

const imgs = document.querySelectorAll(".blue-btn");
imgs.forEach(element => {
  e.classList.add("active");
});

3. Jeżeli chcesz dodać klasę do elementu przy najechaniu myszką:

const imgs = document.querySelectorAll(".blue-btn");
imgs.forEach(element => {
  element.addEventListener('mouseover', e => e.classList.add("active"));
});

dziękuję za odpowiedź, niestety kod nie działa
zwrot z konsoli :
Uncaught TypeError: Cannot read property 'add' of undefined
at HTMLDivElement.element.addEventListener.e

A przepraszam, pomyłka. Lambda przekazana do addEventListener jako pierwszy argument ma event, a nie element. Wystarczy zrobić tak:

element.addEventListener('mouseover', ({ currentTarget }) => currentTarget.classList.add("active"));

Desu napisał(a):

A przepraszam, pomyłka. Lambda przekazana do addEventListener jako pierwszy argument ma event, a nie element. Wystarczy zrobić tak:

element.addEventListener('mouseover', ({ currentTarget }) => currentTarget.classList.add("active"));

Dalej nie działą :c

A coś więcej? U mnie działa: https://jsfiddle.net/bap7dLnk/