CSS grid layout - how to work out which grid cell the mouse is in with javascript?

Question

"css grid layout" = https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

Does anyone know of a javascript way to work out what column / row the mouse is currently in?

I'm guessing something like this is a start for getting the what cell the mouse is in however this would only be useful for grids of equal sizes.

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

Is there a way to do this with cells that aren't equal?

---

Update 1 - adding a codepen

Here is a codepen which shows 3 various percentage column widths (grid-template-columns: 25% 50% 25%;), 2 rows, a grid cell with no element with in it and an element that spans more than one row: http://codepen.io/anon/pen/NbeOXp

---

Update 2 - attempt at working out what grid cell the mouse is in.

Here I have added hidden elements to each cell in the grid to detect which cell the mouse is in. However it only returns "auto" for the current element it is in. It's also pretty clunky having to add extra hidden elements to the grid IMO.

http://codepen.io/anon/pen/gLZBZw Hint: use the mouse to hover over the grid.

Answer 1

Add event listener to the parent of the grid colums. Its called event delegation. You can use event.target in on hover event and inside for loop compare the ev.target.parent element==document.querySelect("#parentElement")[index] Post all ur code html code to write it exactly if you want.