Question

我想在网格中的嵌套网格的每一行上制作一个hover，该模板的模板是由列而不是行呈现的。

结构如下：

网格
- 列
  - 列是只有行的显示网格

这是一个具有结构的jsfiddle。我只将鼠标悬停在嵌套行上。我知道我可以反转div结构，但是不能。我确实对列有很多依赖性：调整大小，拖放->以行方式呈现会降低我的性能，这是我会避免的。

编辑

当我们将鼠标悬停在grid-wrapper__nested的子元素div元素上时，我想将每个

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');
      }
    }
  })
}

See fiddle

如果您使用的是jQuery之类的库，则可以更轻松地使用jquery on('hover', func)函数，与index()调用等同时使用。

Answer 2

您将不得不更改“创建”正方形的方式。现在，您将它们写为列。您需要更改它们，以便将它们“打印”为行。然后将其添加到您的___nested部分：

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

此处https://jsfiddle.net/Lzsjhc8k/17/

将父网格上的嵌套网格中的每一行悬停

2 个答案: