有没有办法在 CSS 网格的网格区域中检测鼠标悬停？答案

【问题标题】：Is there a way to detect a mouseover in a grid-area of a CSS grid?有没有办法在 CSS 网格的网格区域中检测鼠标悬停？
【发布时间】：2019-02-21 22:28:27
【问题描述】：

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

我有一张大图，它在 CSS 网格的一个区域中横向居中。大图像被“划分”为三个垂直部分，每个部分内部都有一个较小的图形（左侧一个，中间一个，右侧一个）。

每当鼠标悬停或悬停事件发生在图形元素的相应垂直部分时，我都会尝试放大每个相应较小图形的版本。

我没有将大图像分成三个相邻的图像，而是想知道我是否将三个网格区域用于大图像，是否可以检测到特定网格区域何时悬停或使用光标输入. 有什么想法吗？

【问题讨论】：

【解决方案1】：

网格轨道不是元素，它们只是用于确定实际元素大小和位置的抽象布局概念。如果您想知道某物何时悬停，则需要在您尝试检测的区域中使用实际元素。

【讨论】：

【解决方案2】：

您是否尝试过使用 CSS :hover 选择器？如果你为每一列分配一个唯一的类名并使用 :hover 选择器，你可能会得到你想要的结果。如果没有，可以使用一些简单的 javaScript 或 jQuery 来完成

【讨论】：

嗨，WadeB。这就是我一直试图弄清楚如何应用于网格区域的方法，但我找不到网格区域的语法：悬停事件。
好吧，你必须为网格列创建一个类名，即<div class="column1">，然后在你的css中添加.column1:hover { (insert styling attributes here) }等。你可能想要开始构建这个页面并使用它和然后在这里发布您的代码以获得更好的帮助。