从父网格悬停嵌套网格中的每一行答案

【问题标题】：Hover each row in nested grid from parent grid从父网格悬停嵌套网格中的每一行
【发布时间】：2018-12-06 18:38:19
【问题描述】：

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

结构如下：

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

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

编辑

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

可视化：

【问题讨论】：

你的问题让我很困惑
我确实添加了图像，它展示了我在悬停在 div 上而不接触 DOM 结构后想要得到的东西
你能试着重写你的问题吗？即使有图像，我也无法理解您要实现的目标。
当然，我会尝试不同的方式
链接到 jsfiddle 必须附有问题中的代码：寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定的问题或错误以及最短的在问题本身中重现它所必需的代码。

标签： javascript html css sass

【解决方案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() 调用等结合使用。

【讨论】：

我曾希望有一种不使用 JS 的方法，但是是的。太完美了！
如果您可以以不同的方式构建您的 HTML（即，让网格生成为一行并将:hover 状态添加到该行），则可以在没有 JS 的情况下执行此操作。但就目前的结构而言，JS 是唯一的方法。
正如我所说，我必须执行许多依赖于 Columns 的操作，并且以不同的方式构造它会导致对太多 div 元素进行太多重新计算。

【解决方案2】：

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

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

这里https://jsfiddle.net/Lzsjhc8k/17/

【讨论】：

水平悬停行怎么样？现在，我们将它们垂直悬停，我们可以反转它吗？
@yerpy 是的，你可以，但是你必须重新构建你创建方块的方式，即 HTML 结构。现在它们被“聚集”为列。抱歉，现在无法更好地解释...