What techniques can I use to change multiple sibling elements with CSS when hovering over them?

Question

What techniques can I use to change multiple sibling elements with CSS when hovering over them?

Imagine a scenario where hovering over any row within group 1 changes the color of all rows within that same group. Now, extend this concept to apply to an unlimited number of groups, denoted by N.

Let's consider having 300 groups, each consisting of 3 rows. How can we implement this highlighting effect for every group without manually duplicating the CSS rule 300 times?

Is it feasible to achieve this purely with CSS?

.parent:has(.group-1:hover) .group-1 {
  background-color: blue;
}

<body class="parent">
  <p class="group-1">Group 1</p>
  <p class="group-1">Group 1</p>
  <p class="group-1">Group 1</p>
  <p class="group-2">Group 2</p>
  <p class="group-2">Group 2</p>
  <p class="group-2">Group 2</p>
  <p class="group-3">Group 3</p>
  <p class="group-3">Group 3</p>
  <p class="group-3">Group 3</p>
</body>

html css

Answer 1

Answer №1

If you find yourself unable to modify the HTML structure to group elements together, you can dynamically generate your CSS rules to avoid manual typing.

// Select all elements with a class containing 'group-'
const allElements = document.querySelectorAll('p[class*="group-"]')

// Extract classNames from the elements
const allClassNames = Array.from(allElements).map(({
  className
}) => className);

// Remove duplicates
const groupings = new Set(allClassNames);

// Construct the selectors
const selectors = Array.from(groupings.values()).map(className => `.parent:has(.${className}:hover) .${className}`).join(",")

// Define the CSS styles for the rule
const theStyles = 'background-color: blue;'

// Create a stylesheet element
const styleEl = document.createElement("style");

// Append it to the head of the document
document.head.appendChild(styleEl);

// Access the stylesheet
const styleSheet = styleEl.sheet;

// Generate the new rule
styleSheet.insertRule(`${selectors}{${theStyles}}`, 0);

P {
  margin: 0; padding: 0;
}

<div class="parent">
  <p class="group-1">Group 1</p>
  <p class="group-1">Group 1</p>
  <p class="group-1">Group 1</p>
  <p class="group-2">Group 2</p>
  <p class="group-2">Group 2</p>
  <p class="group-2">Group 2</p>
  <p class="group-3">Group 3</p>
  <p class="group-3">Group 3</p>
  <p class="group-3">Group 3</p>
</div>

Answer 2

If you find yourself unable to modify the HTML structure to group elements together, you can dynamically generate your CSS rules to avoid manual typing.

// Select all elements with a class containing 'group-'
const allElements = document.querySelectorAll('p[class*="group-"]')

// Extract classNames from the elements
const allClassNames = Array.from(allElements).map(({
  className
}) => className);

// Remove duplicates
const groupings = new Set(allClassNames);

// Construct the selectors
const selectors = Array.from(groupings.values()).map(className => `.parent:has(.${className}:hover) .${className}`).join(",")

// Define the CSS styles for the rule
const theStyles = 'background-color: blue;'

// Create a stylesheet element
const styleEl = document.createElement("style");

// Append it to the head of the document
document.head.appendChild(styleEl);

// Access the stylesheet
const styleSheet = styleEl.sheet;

// Generate the new rule
styleSheet.insertRule(`${selectors}{${theStyles}}`, 0);

P {
  margin: 0; padding: 0;
}

<div class="parent">
  <p class="group-1">Group 1</p>
  <p class="group-1">Group 1</p>
  <p class="group-1">Group 1</p>
  <p class="group-2">Group 2</p>
  <p class="group-2">Group 2</p>
  <p class="group-2">Group 2</p>
  <p class="group-3">Group 3</p>
  <p class="group-3">Group 3</p>
  <p class="group-3">Group 3</p>
</div>

Answer 3

Answer №2

If you are certain that each group consists of exactly 3 entries, you can implement a solution using nth-child, before pseudo element (for holding the background), and z-index.

This code snippet limits the hover effect to the first element in a group while giving the user the impression that they are hovering over the entire group. This is achieved by using a before pseudo element on the first element that overlays the others in the group.

<style>
  .parent {
    overflow: hidden;
  }
  
  .parent>p {
    width: 100%;
    display: inline-block;
    position: relative;
  }
  
  .parent>p:nth-child(3n-2) {
    z-index: 1;
  }
  
  .parent>p:nth-child(3n-2)::before {
    content: '';
    background: transparent;
    position: absolute;
    width: 100%;
    height: 100vw;
  }
  
  .parent>p:nth-child(3n-2):hover::before {
    background: yellow;
    z-index: -1;
  }
  
  .parent>p:nth-child(3n-2):hover~p:nth-child(3n-2) {
    z-index: 2;
    background: white;
  }
  
  .parent>p:nth-child(3n-2):hover~p:nth-child(3n-2)+p,
  .parent>p:nth-child(3n-2):hover~p:nth-child(3n-2)+p+p {
    z-index: 3;
    rbackground: white;
  }
  
  .parent>p:nth-child(3n-2):hover~p:nth-child(3n-2)::before {
    z-index: -1;
    background: white;
  }
  
  .parent>p:nth-child(3n-2):hover+p,
  .parent>p:nth-child(3n-2):hover+p+p {
    z-index: 2;
  }
  
  .parent>p:nth-child(3n-1),
  .parent>p:nth-child(3n) {
    pointer-events: none;
  }
</style>

<body>
  <div class="parent">
    <p class="group-1">Group 1</p>
    <p class="group-1">Group 1</p>
    <p class="group-1">Group 1</p>
    <p class="group-2">Group 2</p>
    <p class="group-2">Group 2</p>
    <p class="group-2">Group 2</p>
    <p class="group-3">Group 3</p>
    <p class="group-3">Group 3</p>
    <p class="group-3">Group 3</p>
    <p class="group-4">Group 4</p>
    <p class="group-4">Group 4</p>
    <p class="group-4">Group 4</p>
    <p class="group-5">Group 5</p>
    <p class="group-5">Group 5</p>
    <p class="group-5">Group 5</p>
  </div>
</body>

On a side note: implementing this approach in practice may not be ideal. While it does achieve the desired highlighting effect, some may consider it to be a bit hacky. An alternative solution using JavaScript could make the functionality clearer and easier to maintain.

Answer 4

If you are certain that each group consists of exactly 3 entries, you can implement a solution using nth-child, before pseudo element (for holding the background), and z-index.

This code snippet limits the hover effect to the first element in a group while giving the user the impression that they are hovering over the entire group. This is achieved by using a before pseudo element on the first element that overlays the others in the group.

<style>
  .parent {
    overflow: hidden;
  }
  
  .parent>p {
    width: 100%;
    display: inline-block;
    position: relative;
  }
  
  .parent>p:nth-child(3n-2) {
    z-index: 1;
  }
  
  .parent>p:nth-child(3n-2)::before {
    content: '';
    background: transparent;
    position: absolute;
    width: 100%;
    height: 100vw;
  }
  
  .parent>p:nth-child(3n-2):hover::before {
    background: yellow;
    z-index: -1;
  }
  
  .parent>p:nth-child(3n-2):hover~p:nth-child(3n-2) {
    z-index: 2;
    background: white;
  }
  
  .parent>p:nth-child(3n-2):hover~p:nth-child(3n-2)+p,
  .parent>p:nth-child(3n-2):hover~p:nth-child(3n-2)+p+p {
    z-index: 3;
    rbackground: white;
  }
  
  .parent>p:nth-child(3n-2):hover~p:nth-child(3n-2)::before {
    z-index: -1;
    background: white;
  }
  
  .parent>p:nth-child(3n-2):hover+p,
  .parent>p:nth-child(3n-2):hover+p+p {
    z-index: 2;
  }
  
  .parent>p:nth-child(3n-1),
  .parent>p:nth-child(3n) {
    pointer-events: none;
  }
</style>

<body>
  <div class="parent">
    <p class="group-1">Group 1</p>
    <p class="group-1">Group 1</p>
    <p class="group-1">Group 1</p>
    <p class="group-2">Group 2</p>
    <p class="group-2">Group 2</p>
    <p class="group-2">Group 2</p>
    <p class="group-3">Group 3</p>
    <p class="group-3">Group 3</p>
    <p class="group-3">Group 3</p>
    <p class="group-4">Group 4</p>
    <p class="group-4">Group 4</p>
    <p class="group-4">Group 4</p>
    <p class="group-5">Group 5</p>
    <p class="group-5">Group 5</p>
    <p class="group-5">Group 5</p>
  </div>
</body>

On a side note: implementing this approach in practice may not be ideal. While it does achieve the desired highlighting effect, some may consider it to be a bit hacky. An alternative solution using JavaScript could make the functionality clearer and easier to maintain.

Answer 5

Answer №3

It seems that achieving this effect solely with CSS is currently not possible, but a simple JavaScript solution can be implemented by assigning a common data attribute to all members of the group. This way, when hovering over one member, all members will receive a data-active attribute.

Your CSS code can then target 'all items with [data-attr] as if they are hovered':

p[data-active] {background:blue;}

While I may not excel in JavaScript, it's plausible that there are ways to refine this method. Nonetheless, this approach is concise and does not necessitate modifications to the HTML or any dynamic CSS generation.

Check out this demo:

document.querySelectorAll(".parent p")
  .forEach(p => addListeners(p));

function addListeners(p){
  p.addEventListener("mouseover", select);
  p.addEventListener("mouseout", deselect);
}

function select(){
  document.querySelectorAll("p."+this.className)
    .forEach(p => p.setAttribute("data-active",""));
}

function deselect(){
  document.querySelectorAll("p."+this.className)
    .forEach(p => p.removeAttribute("data-active"));
}

p {margin:0}
p[data-active] {
background:blue;
}

<div class="parent">
  <p class="group-1">Group 1</p>
  <p class="group-1">Group 1</p>
  <p class="group-1">Group 1</p>
  <p class="group-2">Group 2</p>
  <p class="group-2">Group 2</p>
  <p class="group-2">Group 2</p>
  <p class="group-2">Group 2</p>
  <p class="group-3">Group 3</p>
  <p class="group-3">Group 3</p>
  <p class="group-3">Group 3</p>
  <p class="group-3">Group 3</p>
  <p class="group-3">Group 3</p>
</div>

Answer 6

It seems that achieving this effect solely with CSS is currently not possible, but a simple JavaScript solution can be implemented by assigning a common data attribute to all members of the group. This way, when hovering over one member, all members will receive a data-active attribute.

Your CSS code can then target 'all items with [data-attr] as if they are hovered':

p[data-active] {background:blue;}

While I may not excel in JavaScript, it's plausible that there are ways to refine this method. Nonetheless, this approach is concise and does not necessitate modifications to the HTML or any dynamic CSS generation.

Check out this demo:

document.querySelectorAll(".parent p")
  .forEach(p => addListeners(p));

function addListeners(p){
  p.addEventListener("mouseover", select);
  p.addEventListener("mouseout", deselect);
}

function select(){
  document.querySelectorAll("p."+this.className)
    .forEach(p => p.setAttribute("data-active",""));
}

function deselect(){
  document.querySelectorAll("p."+this.className)
    .forEach(p => p.removeAttribute("data-active"));
}

p {margin:0}
p[data-active] {
background:blue;
}

<div class="parent">
  <p class="group-1">Group 1</p>
  <p class="group-1">Group 1</p>
  <p class="group-1">Group 1</p>
  <p class="group-2">Group 2</p>
  <p class="group-2">Group 2</p>
  <p class="group-2">Group 2</p>
  <p class="group-2">Group 2</p>
  <p class="group-3">Group 3</p>
  <p class="group-3">Group 3</p>
  <p class="group-3">Group 3</p>
  <p class="group-3">Group 3</p>
  <p class="group-3">Group 3</p>
</div>

Answer 7

Answer №4

Aside from their specific class names, each of them can be assigned an additional class name. Furthermore, if you implement the following:

.parent > *{}

This selector allows you to target all children of the parent/body element. You can also style all  elements by using the  tags specifically.

Answer 8

Aside from their specific class names, each of them can be assigned an additional class name. Furthermore, if you implement the following:

.parent > *{}

This selector allows you to target all children of the parent/body element. You can also style all  elements by using the  tags specifically.

What techniques can I use to change multiple sibling elements with CSS when hovering over them?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Show information from mysql in a dual-column format

unable to interpret information

Expanding a non-bootstrap navigation bar upon clicking the menu

Issues with creating modal images using only JavaScript

Achieve perfect alignment of Bootstrap checkboxes

Difficulty in making Materialize.css column match the height of the entire row

Is there a way to access an SD card by clicking on an HTML link using JavaScript?

Placing 2 elements next to each other - Where the left element remains static and the right element's width increases as the page expands

Expanding image in table data to full screen upon clicking using jQuery

When the enter key is pressed, the form will be automatically submitted

Various instances of the jQuery niceScroll plugin

Is there a way to ensure a Bootstrap grid column takes up the entire remaining row space?

Troubleshooting issue: Angular not resolving controller dependency in nested route when used with requirejs

What is the proper method for storing user registration information in the database so that it can be easily retrieved and accessed later? (Error message)

I'm a bit uncertain about the best placement for my progress bar component during the API call

Pass information from a row to an AngularJS controller upon clicking the checkbox within the row

What is the functionality of 'min-height: 100vh' when child elements stack due to a small width?

HTML filtering using the <select> element

What is the proper way to eliminate the port from a URL so that the images sourced from the XAMPP database can function correctly?

Formatting text and images in CSS