How to Apply a CSS Hover effect to multiple Elements

# Table of Contents

# How to Apply a CSS Hover effect to multiple Elements

To apply a CSS hover effect to multiple elements:

Wrap the elements in div tag.
Apply the hover effect to the div and scope the specific styles to each element.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      .container:hover .first {
        background-color: aquamarine;
      }

      .container:hover .second {
        background-color: lime;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="first">First Box</div>

      <div class="second">Second box</div>
    </div>
  </body>
</html>

apply hover to multiple elements

The code for this article is available on GitHub

Every time I hover over the div that has a class of container, the hover effects are applied to the div elements with classes of first and second.

Notice that I wrapped the two elements in a wrapper div.

index.html

Copied!
<div class="container">
  <div class="first">First Box</div>

  <div class="second">Second box</div>
</div>

Both CSS selects are applied when the user hovers over the div that has a class of container.

style.css

Copied!
.container:hover .first {
  background-color: aquamarine;
}

.container:hover .second {
  background-color: lime;
}

The example assumes that you want to set different styles on the two elements.

The div element with a class of container doesn't have to be a direct parent of the other two div tags.

For example, the following code sample also works.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      .container:hover .first {
        background-color: aquamarine;
      }

      .container:hover .second {
        background-color: lime;
      }
    </style>
  </head>
  <body>
    <div class="container">

      <!-- 👇️ more deeply nested divs -->
      <div>
        <div>
          <div class="first">First Box</div>

          <div class="second">Second box</div>
        </div>
      </div>
    </div>
  </body>
</html>

The code for this article is available on GitHub

# Applying the same hover style to multiple elements

If you need to apply the same hover effect to multiple elements when another element is hovered, separate the selectors by a comma.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      .container:hover .first,
      .container:hover .second {
        background-color: aquamarine;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="first">First Box</div>

      <div class="second">Second box</div>
    </div>
  </body>
</html>

apply same hover effect to multiple elements

The code for this article is available on GitHub

The example sets the same hover style on both div elements (first and second).

style.css

Copied!
.container:hover .first,
.container:hover .second {
  background-color: aquamarine;
}

You can specify as many comma-separated selectors as necessary.

Both elements to which we want to apply the hover effect are divs, so we could simplify the selector a bit.

style.css

Copied!
.container:hover div {
  background-color: aquamarine;
}

The selector assumes that you want to apply the hover effect to all div elements that are descendants of the container div.

# Apply a CSS hover effect to multiple elements using JavaScript

You can also use JavaScript to apply a CSS hover effect to multiple elements.

Wrap the elements in a div.
Add a mouseover event listener to the wrapper div.
Style the elements in the mouseover event.
Unstyle the elements in a mouseout event.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div class="container">
      <div class="first">First Box</div>

      <div class="second">Second box</div>
    </div>

    <script src="index.js"></script>
  </body>
</html>

Here is the related JavaScript code.

index.js

Copied!
const container = document.querySelector('.container');

const first = document.querySelector('.first');
const second = document.querySelector('.second');

container.addEventListener('mouseover', () => {
  first.style.backgroundColor = 'lime';

  second.style.backgroundColor = 'aquamarine';
});

container.addEventListener('mouseout', () => {
  first.style.backgroundColor = '';

  second.style.backgroundColor = '';
});

apply hover effect to multiple elements using javascript

The code for this article is available on GitHub

We first selected the elements using the document.querySelector method.

index.js

Copied!
const container = document.querySelector('.container');

const first = document.querySelector('.first');
const second = document.querySelector('.second');

The querySelector method takes a selector as a parameter and returns the first matching element.

When selecting an element by a class, you would use the .my-class selector and when selecting an element by id, you would use the #my-id selector.

The next step is to set an event listener that listens for the mouseover event.

index.js

Copied!
container.addEventListener('mouseover', () => {
  first.style.backgroundColor = 'lime';

  second.style.backgroundColor = 'aquamarine';
});

The mouseover event gets triggered when the user's pointing device (a mouse or a trackpad) is used to move the cursor onto the element or one of its children.

When the user hovers over the wrapper div, we apply the hover styles.

Conversely, when the user moves their cursor out of the wrapper div, the mouseout event is triggered.

index.js

Copied!
container.addEventListener('mouseout', () => {
  first.style.backgroundColor = '';

  second.style.backgroundColor = '';
});

You can remove the hover styles in the mouseout event.

The code for this article is available on GitHub

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

How to Apply a CSS Hover effect to multiple Elements

# Table of Contents