CSS Grid 如何选择行以添加悬停效果

1个回答

13555704498

2025-07-10 00:35

CSS
CSS

CSS Grid 是一种强大的布局模块，它可以帮助我们创建复杂的网格布局。在使用 CSS Grid 来设计网页布局时，我们经常会遇到需要为某些行添加悬停效果的需求。本文将介绍如何使用 CSS Grid 来选择行并为其添加悬停效果，并提供相应的案例代码。

在 CSS Grid 中，我们可以使用 grid-row 属性来选择行。该属性接受一个值或一个范围，用于指定要选择的行的位置。例如，grid-row: 2 表示选择第二行，grid-row: 2 / 4 表示选择第二行到第四行。

为了为选择的行添加悬停效果，我们可以使用 :hover 伪类选择器。通过将 :hover 伪类选择器与 grid-row 属性结合使用，我们可以为特定的行添加悬停效果。

下面是一个简单的示例，展示了如何使用 CSS Grid 来选择行并为其添加悬停效果：

html
<!DOCTYPE html>
<html>
  <head>
    <style>
      .grid-contAIner {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 100px 100px 100px;
        GAP: 10px;
      }
      .grid-item {
        background-color: #ccc;
        padding: 20px;
        text-align: center;
        font-size: 20px;
      }
      .grid-item:hover {
        background-color: #ff0000;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="grid-contAIner">
      <div class="grid-item">1</div>
      <div class="grid-item">2</div>
      <div class="grid-item">3</div>
      <div class="grid-item">4</div>
      <div class="grid-item">5</div>
      <div class="grid-item">6</div>
      <div class="grid-item">7</div>
      <div class="grid-item">8</div>
      <div class="grid-item">9</div>
    </div>
  </body>
</html>

在上面的示例中，我们创建了一个具有 3 列和 3 行的网格布局。每个格子都有一个类名为 grid-item 的

元素。在 CSS 中，我们为 .grid-item 类选择器定义了一些基本的样式，如背景颜色、内边距、文字居中和字体大小。

接着，我们为 .grid-item 类选择器的 :hover 状态定义了另外一组样式，包括背景颜色和文字颜色。当鼠标悬停在特定的行上时，这些样式将应用到对应的格子上，实现了悬停效果。

代码示例：

html
<!DOCTYPE html>
<html>
  <head>
    <style>
      .grid-contAIner {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 100px 100px 100px;
        GAP: 10px;
      }
      .grid-item {
        background-color: #ccc;
        padding: 20px;
        text-align: center;
        font-size: 20px;
      }
      .grid-item:hover {
        background-color: #ff0000;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="grid-contAIner">
      <div class="grid-item">1</div>
      <div class="grid-item">2</div>
      <div class="grid-item">3</div>
      <div class="grid-item">4</div>
      <div class="grid-item">5</div>
      <div class="grid-item">6</div>
      <div class="grid-item">7</div>
      <div class="grid-item">8</div>
      <div class="grid-item">9</div>
    </div>
  </body>
</html>

在上面的示例中，我们创建了一个具有 3 列和 3 行的网格布局。每个格子都有一个类名为 grid-item 的

元素。在 CSS 中，我们为 .grid-item 类选择器定义了一些基本的样式，如背景颜色、内边距、文字居中和字体大小。

举报有用（4）分享收藏

CSS Grid 如何选择行以添加悬停效果

1个回答

13555704498

热门话题

相关问题