0

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

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);
  
}


});
4
  • В вашем случае, возможно, стоит использовать learn.javascript.ru/event-delegation 17 авг 2021 в 21:24
  • "Есть много элементов с одинаковым классом..." А у нас нет ни одного :-( Поделитесь хотя бы частью?
    – UModeL
    18 авг 2021 в 0:17
  • document.querySelector - забирает первый селектор, который соответствует введённому в скобки значению. Если хотите взять все, то следует использовать document.querySelectorAll, это, как говорится, первое.
    – Quazimorda
    18 авг 2021 в 8:27
  • Как на счет this??
    – pyduti
    18 авг 2021 в 12:42

1 ответ 1

0

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>

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.