Наведите каждую строку во вложенной сетке из родительской сетки

Question

Я хотел бы сделать hover для каждой строки из вложенной сетки в сетке, в которой шаблон отображается столбцами вместо строк.

Структура выглядит следующим образом:

• Сетка
  • Столбец
    • Столбец - это сетка с только строками

Вот это jsfiddle со структурой.Я только зависал на вложенном ряду.Я знаю, что могу изменить структуру div, но не могу.У меня есть много зависимостей от столбцов: изменение размера, перетаскивание и рендеринг -> рендеринг его в виде строки уменьшит мои исполнения, которых я бы избегал.

EDIT

Когдамы наведите курсор на элемент div, который является дочерним элементом grid-wrapper__nested. Я хотел бы навести каждый div на одну строку в каждом grid-wrapper__nested.

. Визуализация:

Answer 1

Кажется, что вы хотите сделать, это выбрать n-го ребенка каждого столбца.Это может быть достигнуто только с помощью JavaScript, в зависимости от используемой вами структуры.Вам также нужно будет использовать класс 'hover', а не состояние ': hover'.В чистом JS:

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

// Cycle throug each cell and add an event handler
for(let element of cells) {
  // Add mouseenter event handler
  element.addEventListener('mouseenter', function() {
    // Get index of cell
    let index = Array.prototype.indexOf.call(this.parentNode.children, this);

    // Loop through each column and add '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;
      // Loop through each cell and remove hover class
      for(let cell of cells) {
        cell.classList.remove('hover');
      }
    }
  })
}

См. Скрипку

Если вы используете библиотеку, такую ​​как jQuery, это станет еще проще, поскольку вы можете использовать функцию jquery on('hover', func)в тандеме с index() звонками и т. д.

Answer 2

Вам придется изменить способ «создания» ваших квадратов.Теперь вы записываете их в виде столбцов.Вы должны изменить это так, чтобы они «печатались» как строки.затем добавьте это в ваш ___nested раздел:

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

здесь https://jsfiddle.net/Lzsjhc8k/17/