What is the best way to modify the background of individual elements by targeting a specific class when hovering over them?

Question

What is the best way to modify the background of individual elements by targeting a specific class when hovering over them?

Looking to dynamically change the background of elements in the "heading" class when hovered over.

const heading = document.querySelector('.heading');
const headingAll = document.querySelectorAll('.heading');
headingAll.forEach(item => {
  item.addEventListener("mouseover",()=>{
    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;
}

<h1 id='heading' class='heading heading2'>First Heading</h1>
<h2 id='heading' class='heading heading2'>Sub Heading</h2>
<h3 id='heading' class='heading heading3'>Third Heading</h3>

The issue is that only the first element with the class "heading" changes background on mouseover. How can I extend this functionality to work for all elements with the same class?

javascript addeventlistener mouseover

Answer 1

Answer №1

Your implementation in the code snippet lacks adherence to the iterator variable set in the forEach callback function. To rectify this, replace all instances of heading with item and your code should function correctly.

const headingAll = document.querySelectorAll('.heading');
headingAll.forEach(item => {
  item.addEventListener("mouseover",()=>{
    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;
}

<h1 id='heading' class='heading heading2'>First Heading</h1>
<h2 id='heading' class='heading heading2'>Sub Heading</h2>
<h3 id='heading' class='heading heading3'>Third Heading</h3>

I have omitted the use of the unnecessary heading variable in my provided code snippet.

Answer 2

Your implementation in the code snippet lacks adherence to the iterator variable set in the forEach callback function. To rectify this, replace all instances of heading with item and your code should function correctly.

const headingAll = document.querySelectorAll('.heading');
headingAll.forEach(item => {
  item.addEventListener("mouseover",()=>{
    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;
}

<h1 id='heading' class='heading heading2'>First Heading</h1>
<h2 id='heading' class='heading heading2'>Sub Heading</h2>
<h3 id='heading' class='heading heading3'>Third Heading</h3>

I have omitted the use of the unnecessary heading variable in my provided code snippet.

Answer 3

Answer №2

Instead of using document.querySelector() to retrieve the element with the class name "heading", consider utilizing the "item" method when there are multiple elements present. This will allow you to modify the style of the specific element that you are applying the mouseover event to.

Answer 4

Instead of using document.querySelector() to retrieve the element with the class name "heading", consider utilizing the "item" method when there are multiple elements present. This will allow you to modify the style of the specific element that you are applying the mouseover event to.

What is the best way to modify the background of individual elements by targeting a specific class when hovering over them?

Answer №1

Answer №2

Similar questions

Failure to achieve closure - even after thorough study of the concept

When I attempt to send a PUT request, the req.body object appears to be empty. This issue is occurring even though I have implemented the method override middleware

Is there a way for a button to automatically delete its corresponding index in an array upon being clicked?

Observables in Knockout.js vanish after being bound

Error occurred while trying to create module 'app' in Angular and MEAN stack

In Safari, non-ascii characters are incorrectly stored in document.cookies as trash

What are some best practices for managing object-level variables in TypeScript and Vue.js?

Is there a way to display multiple images in a JSON message object?

Tips for transferring current subscription information with Stripe at the time of checkout

TaffyDB is throwing an error message indicating that TAFFY is not recognized as a function

React-slick slider not functioning properly when using TypeScript

Ternary conditionals don't support splicing

What is the best location for storing your front-end javascript files?

Guide to setting up a lobby system with Javascript within a Django framework

Refreshing ng-repeat dynamically with $http without reloading the page

Adjusting the height of a DIV element to suit the window dimensions

Error: The function m.easing[this.easing] is not defined

What could be the reason for the undefined initial state in my vuex store?

What is the minimum number of characters required to embed JavaScript using the HTML5 <script> element?

Transferring SetState from a parent component to a child component in React Native