Question about CSS Grid

Hi campers, does anyone know if there’s a way to tell when the cursor is over an empty grid cell? I know if I added invisible div in there I could just add mouseover event listener to that div, but I’m wondering if there’s a way to do it without having a bunch of empty divs cluttering the markup space.

There isn’t per se. You can track cursors current location and you can manipulate dom elements when mouse hovers over it. Check this out. For manipulation i suggest using jquery $(selector).on(event, function(){
//yourCode
});

2 Likes

Grids aren’t designed for that. CSS layout isn’t full stop. You need something that you can get consistent coordinates from, so your aforementioned empty divs, or an HTML table, or an SVG, or a canvas element. The latter is [technically] likely to the best for what I think you’re trying to do, but it has a completely different API, one of the other options will be likely much simpler at this stage.

2 Likes

Ah, bummer. Guess I’ll try the empty divs approach and see how it goes. Thanks for replying!

Try this. I commented out div with id=“header” so when you hover over empty space where this should been you’ll get id of an container. Long story short: grid gaps are container itself.