2

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?

scopchanov
  • 7,966
  • 10
  • 40
  • 68
Yetanotherusername
  • 109
  • 8

2 Answers2

2

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.

Xanthir
  • 18,065
  • 2
  • 31
  • 32
-3

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

WadeB
  • 79
  • 6
  • Hi WadeB. That's what I have been trying to figure out how to apply to a grid-area, but I can't find the syntax for a grid-area:hover event. – Yetanotherusername Sep 18 '18 at 00:23
  • Well, you have to creat a class name for the grid column ie `
    ` and then in your css add `.column1:hover { (insert styling attributes here) }` etc. You may want to start building this page and play around with it and then post your code here for better help.
     – WadeB Sep 18 '18 at 00:34