"Explore each row within the nested grid by hovering over them from the main parent

Question

"Explore each row within the nested grid by hovering over them from the main parent

I want to implement a hover effect on each row within a nested grid that is displayed by columns instead of rows.

The layout appears as follows:

Grid
- Column
  - The column displays a grid with only rows

Check out this jsfiddle for the structure. I have managed to apply the hover effect on nested rows only. Although I am aware that I could rearrange the div structure, it is not feasible due to multiple dependencies on columns such as resizing and drag-and-drop functionality, which would compromise performance if rendered in row format – something I definitely want to avoid.

UPDATE

Essentially, when hovering over a div element that is a child of the grid-wrapper__nested, I aim to trigger the hover effect on every div within the same row in every grid-wrapper__nested.

For a visual aid, refer to this illustration: https://i.sstatic.net/FUsnA.png

javascript html css sass

Answer 1

Answer №1

To achieve the selection of the nth-child in each column, you will need to utilize JavaScript with the current structure in place. It is important to note that a 'hover' class must be used instead of a ':hover' state. Below is an example of how this can be accomplished using pure JS:

let table = document.querySelectorAll('.grid-wrapper')[0];
let columns = table.children;
let cells = document.querySelectorAll('.grid-wrapper__nested__row');

// Iterate through each cell and attach event handlers
for(let element of cells) {
  // Add mouseenter event handler
  element.addEventListener('mouseenter', function() {
    // Obtain index of the cell
    let index = Array.prototype.indexOf.call(this.parentNode.children, this);

    // Loop through each column and add the 'hover' class
    for(let column of columns) {
      // Add 'hover' class to nth-child
      column.children[index].classList.add('hover')
    }
  })

  // Add mouseout event handler
  element.addEventListener('mouseleave', function() {
    for(let column of columns) {
      let cells = column.children;
      // Iterate through each cell and remove the 'hover' class
      for(let cell of cells) {
        cell.classList.remove('hover');
      }
    }
  })
}

Check out the fiddle

If jQuery or similar libraries are being used, the task becomes simpler as functions like on('hover', func) can be utilized alongside calls to index().

Answer 2

To achieve the selection of the nth-child in each column, you will need to utilize JavaScript with the current structure in place. It is important to note that a 'hover' class must be used instead of a ':hover' state. Below is an example of how this can be accomplished using pure JS:

let table = document.querySelectorAll('.grid-wrapper')[0];
let columns = table.children;
let cells = document.querySelectorAll('.grid-wrapper__nested__row');

// Iterate through each cell and attach event handlers
for(let element of cells) {
  // Add mouseenter event handler
  element.addEventListener('mouseenter', function() {
    // Obtain index of the cell
    let index = Array.prototype.indexOf.call(this.parentNode.children, this);

    // Loop through each column and add the 'hover' class
    for(let column of columns) {
      // Add 'hover' class to nth-child
      column.children[index].classList.add('hover')
    }
  })

  // Add mouseout event handler
  element.addEventListener('mouseleave', function() {
    for(let column of columns) {
      let cells = column.children;
      // Iterate through each cell and remove the 'hover' class
      for(let cell of cells) {
        cell.classList.remove('hover');
      }
    }
  })
}

Check out the fiddle

If jQuery or similar libraries are being used, the task becomes simpler as functions like on('hover', func) can be utilized alongside calls to index().

Answer 3

Answer №2

To enhance the appearance of your squares, you must adjust the method of how they are represented. Instead of listing them as columns, aim for a layout that showcases them in rows. Once this modification is made, introduce the following code snippet within your nested section:

&:hover &__row{
   background-color: yellow;
}

For further reference, visit https://jsfiddle.net/Lzsjhc8k/17/

Answer 4

To enhance the appearance of your squares, you must adjust the method of how they are represented. Instead of listing them as columns, aim for a layout that showcases them in rows. Once this modification is made, introduce the following code snippet within your nested section:

&:hover &__row{
   background-color: yellow;
}

For further reference, visit https://jsfiddle.net/Lzsjhc8k/17/

"Explore each row within the nested grid by hovering over them from the main parent

Answer №1

Answer №2

Similar questions

Is the Angular Library tslib peer dependency necessary for library publication?

Keeping firebase auth while removing firestore from Vue project

Having trouble with data retrieval from MySQL using PHP and Angular on certain mobile devices, although it functions properly on desktops and laptops

Adding a stylesheet dynamically in Angular 2: A step-by-step guide

Get the $_POST data from two different pages

Is there a way to modify the height and width of a div layer?

Do we need to have the 'input type file' field as

Receiving a NaN output rather than a numerical value

Attempting to simulate a camera shutter effect using div elements

Ways to simultaneously apply fade in and fade out effects using CSS

Change from arbitrary sequence to structured array arrangement

A TypeError is thrown when attempting to use window[functionName] as a function

Top strategy for incorporating/displaying extra form fields

Unlocking JSON data with identical keys using JavaScriptLearn how to access JSON data with

Incorporating the Facebook Like button onto your fan page

Establishing a connection to an API endpoint directly from the files stored

Why is it necessary to decode JSON stringified objects in Vue props?

The AppJS warning: A potentially dangerous JavaScript attempt to access a frame with a URL

The width of the <ul> element does not properly accommodate the width of the <li> elements during the animation that updates the width of the <li>

When it comes to for loops, one important aspect to consider is the value of each