javascript - 从父网格悬停嵌套网格中的每一行

Question

我想hover从网格中的嵌套网格中的每一行上创建一个，其中模板由列而不是行呈现。

结构如下：

• 网格
  • 柱子
    • 列是只有行的显示网格

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

编辑

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

可视化：

标签： javascripthtmlcsssass

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 这样的库，它会变得更加容易，因为您可以使用 jqueryon('hover', func)函数，与index()调用等结合使用。