Помогите пожалуйста присвоить каждому элементу свой обработчик

Question

Есть много элементов с одинаковым классом, нужно при наведении каждому индивидуально менять текст. У меня меняется либо только у первого(при наведении на любой из них) либо сразу у всех. Надеюсь на вашу помощь.

function mouseover(event){
  document.querySelector('.portfolio__item__span').innerHTML = 'Перейти на сайт' ;


}

function mouseout(event){
  document.querySelector('.portfolio__item__span').innerHTML = 'Название' ;


}

document.addEventListener('DOMContentLoaded', function(event){
  for(let portfolio of document.querySelectorAll('.portfolio__item')){
    portfolio.addEventListener('mouseover', mouseover);
    portfolio.addEventListener('mouseout', mouseout);

  }

  for (let i = 0 ; i < portfolio.length; i++) {
    portfolio[i].addEventListener('mouseover', mouseover);
    portfolio[i].addEventListener('mouseout', mouseout);
  
}


});

Answer 1

document.querySelectorAll(".class").forEach(el => {
el.addEventListener('mouseover', function(e){
    this.style.color = "blue"
});
el.addEventListener('mouseout', function(e){
    this.style.color = "red"
});
})

.class {
  color: red;
}

<div class = "class">Text</div>
<div class = "class">Text2</div>
<div class = "class">Text3</div>
<div class = "class">Text4</div>
<div class = "class">Text5</div>
<div class = "class">Text6</div>
<div class = "class">Text7</div>
<div class = "class">Text8</div>
<div class = "class">Text9</div>

Можно сделать как-то так

Answer 2

function mouseover(event) {
  this.querySelector('.portfolio__item__span').innerHTML = 'Перейти на сайт';
  ^^^^
}

БЛОГ НА HUSL

Помогите пожалуйста присвоить каждому элементу свой обработчик

Ответы (2 шт):