CSS网格布局 - 如何使用javascript计算鼠标所在的网格单元格？

Question

"css网格布局"= https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

有没有人知道一种javascript方法来计算鼠标当前所在的列/行？

我猜这样的东西是获得鼠标所在单元格的开始,但是这只适用于相同大小的网格.

MouseGridColumn = round(mouseX / ( gridContainerWidth  / gridTotalColumnsNumber ) )
MouseGridRow    = round(mouseY / ( gridContainerHeight / gridTotalRowsNumber    ) )

有没有办法用不相等的细胞做到这一点？

---

更新1 - 添加codepen

这是一个codepen,显示3个不同的百分比列宽(grid-template-columns: 25% 50% 25%;),2行,一个没有元素的网格单元格和一个跨越多行的元素:http://codepen.io/anon/pen/NbeOXp

---

更新2 - 尝试计算鼠标所在的网格单元格.

在这里,我为网格中的每个单元格添加了隐藏元素,以检测鼠标所在的单元格.但是它只返回它所在的当前元素的"auto".它还非常笨重,不得不向网格添加额外的隐藏元素IMO .

http://codepen.io/anon/pen/gLZBZw提示:使用鼠标悬停在网格上.

Answer 1

将事件侦听器添加到网格列的父级。它称为事件委托。 如果需要，您可以event.target在悬停事件中使用，并在 for 循环中使用，比较发布所有代码 html 代码，以便准确地编写它。ev.target.parent element==document.querySelect("#parentElement")[index]