Is there a way to detect a mouseover in a grid-area of a CSS grid?

Question

I don't have any code to provide as to what I've tried so far because it's just a hypothetical question at this point.

I have a large image, and it is centered width-wise in one area of a CSS grid. The large image is "zoned" into three vertical sections, with a smaller graphic inside each section (one in the left section, one in the middle, and one in the right section).

I am trying to have a version of each respective smaller graphic enlarged whenever a mouseOver or hover event takes place in the graphic element's respective vertical section.

Rather than split the large image into three adjacent images, I was wondering if I instead used three grid-areas for the large image, if it is possible to detect when a specific grid-area is hovered over or entered with the cursor. Any ideas?

Answer 1

Grid tracks aren't elements, they're just abstract layout concepts used to size and position actual elements. If you want to tell when something is hovered, you need to use an actual element in the area you're trying to detect.

Answer 2

Have you tried using CSS :hover selector? if you assign each column a unique class name and use the :hover selector you may get the results you are after. If not that could be done with with some simple javaScript or jQuery