有没有办法检测 CSS 网格的网格区域中的鼠标悬停?

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

到目前为止,我没有任何代码可以提供我尝试过的内容,因为这只是一个假设性问题。

我有一张大图片,它在 CSS 网格的一个区域中横向居中。大图被"zoned"分成三个垂直部分,每个部分里面有一个较小的图形(一个在左边,一个在中间,一个在右边)。

我试图在图形元素各自的垂直部分发生鼠标悬停或悬停事件时放大每个各自较小图形的版本。

我想知道我是否为大图像使用了三个网格区域,而不是将大图像拆分为三个相邻的图像,是否可以检测到何时将鼠标悬停在特定的网格区域上或使用光标。 有什么想法吗?

您尝试过使用 CSS :hover 选择器吗?如果您为每一列分配一个唯一的 class 名称并使用 :hover 选择器,您可能会得到您想要的结果。如果不是,可以用一些简单的 javaScript 或 jQuery

来完成

网格轨道不是元素,它们只是用于调整实际元素的大小和位置的抽象布局概念。如果你想知道什么时候悬停,你需要在你试图检测的区域使用一个实际的元素。