Блог

Главная - Вопросы по программированию - Как я могу изменить фон каждого элемента с помощью определенного класса при наведении курсора мыши?

Как я могу изменить фон каждого элемента с помощью определенного класса при наведении курсора мыши?

#javascript #addeventlistener #mouseover

Вопрос:

Я пытаюсь изменить фон элементов с помощью класса «заголовок» при наведении курсора мыши.

 const heading = document.querySelector('.heading'); const headingAll = document.querySelectorAll('.heading'); headingAll.forEach(item =gt; {  item.addEventListener("mouseover",()=gt;{  heading.style.backgroundColor='teal';  }); }) 
 .heading{  background-color: yellow;  width: 50%;  margin:0 auto;  padding: 10px;  border: 1px solid red;  cursor: pointer; }  .heading2,heading3{  margin-top: 10px; } 
 lt;h1 id='heading' class='heading heading2'gt;First Headinglt;/h1gt; lt;h2 id='heading' class='heading heading2'gt;Sub Headinglt;/h2gt; lt;h3 id='heading' class='heading heading3'gt;Third Headinglt;/h3gt;

Проблема в том, что фон меняется только для первого элемента с классом «заголовок». Я не знаю, как заставить это работать с другими элементами. Как я могу этого достичь?

Комментарии:

1. querySelectorAll-это то, что вы ищете

2. идентификатор должен быть уникальным, не должен повторяться.

3. Ваша проблема в том, что heading переменная ссылается на первый элемент, соответствующий переданному селектору querySelector() . Используйте item.style.backgroundColor='teal' вместо header.style.backgroundColor='teal'

Ответ №1:

В своем фрагменте кода вы не следуете переменной итератора, заданной в forEach функции обратного вызова. Измените это на item вместо heading , и это должно сработать.

 const headingAll = document.querySelectorAll('.heading'); headingAll.forEach(item =gt; {  item.addEventListener("mouseover",()=gt;{  item.style.backgroundColor='teal';  }); }) 
 .heading{  background-color: yellow;  width: 50%;  margin:0 auto;  padding: 10px;  border: 1px solid red;  cursor: pointer; }  .heading2,heading3{  margin-top: 10px; } 
 lt;h1 id='heading' class='heading heading2'gt;First Headinglt;/h1gt; lt;h2 id='heading' class='heading heading2'gt;Sub Headinglt;/h2gt; lt;h3 id='heading' class='heading heading3'gt;Third Headinglt;/h3gt;

Обратите внимание, что я избавился от вашей heading переменной, так как ее не нужно было использовать в моем фрагменте.

Ответ №2:

Вы используете document.querySelector() , чтобы получить элемент с заголовком имени класса, если есть более одного элемента, он получит только первый. Здесь вам нужно использовать элемент вместо заголовка, чтобы изменить стиль элементов, в который вы добавляете событие наведения курсора мыши.

Метки: