为不同的网格项目重用 CSS 悬停样式答案

【问题标题】：reuse css hover stlye for different grid items为不同的网格项目重用 CSS 悬停样式
【发布时间】：2021-11-27 14:23:10
【问题描述】：

当我想放置一个 3x9 网格时，我正在开发一个网站。

该网格中的项目应该在网格内的特定位置，所以我基本上创建了 27 个网格项目，在每个网格项目中我将行和列设置如下：

.grid-item1 {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
  border: 3px solid rgba(255, 254, 5, 0.4);
  border-radius: 10px;
  color: rgba(255, 254, 5, 0.4);
  column-gap: 10px;
  display: grid;
  grid-column-start: 1;
  grid-row-start: 1;
  height: auto;
  width: auto;
  padding: 5px;

}

.grid-item2 {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
  border: 3px solid rgba(255, 254, 5, 0.4);
  border-radius: 10px;
  column-gap: 10px;
  color: rgba(255, 254, 5, 0.4);
  display: grid;
  grid-column-start: 2;
  grid-row-start: 1;
  height: auto;
  width: auto;
  padding: 5px;
}

.grid-item3 {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
  border: 3px solid rgba(255, 254, 5, 0.4);
  border-radius: 10px;
  column-gap: 10px;
  color: rgba(255, 254, 5, 0.4);
  display: grid;
  grid-column-start: 3;
  grid-row-start: 1;
  height: auto;
  width: auto;
  padding: 5px;
}

等等。

现在，我想添加一个效果，使每个网格项目在鼠标悬停时移动。

这是否意味着我现在需要为它们中的每一个创建 27 个 .grid-item(X):hover ？这对我来说没有意义，但我可以做任何其他事情来让它发挥作用。

我的 HTML 的构建方式是：

        <div class="grid-container">
            <div class="grid-item1">
                <div class="grid-name">
                    <p class="skill">A</p>
                </div>
                <div class="grid-image">
                    <img src="/static/icons/A.png">
                </div>
                <div class="grid-rank">
                    <p class="small">Current rank: 200000000</p>
                </div>
                <div class="grid-level">
                    <p class="small">Current level:100</p>
                </div>
                <div class="grid-xp">
                    <p class="small">Current XP: 200000000</p>
                </div>
            </div>
            <div class="grid-item2">
                <div class="grid-name">
                    <p class="skill">H</p>
                </div>
                <div class="grid-image">
                    <img src="/static/icons/H.png">
                </div>
                <div class="grid-rank">
                    <p class="small">Current rank: 200000000</p>
                </div>
                <div class="grid-level">
                    <p class="small">Current level:100</p>
                </div>
                <div class="grid-xp">
                    <p class="small">Current XP: 200000000</p>
                </div>
            </div>
            .
            .
            .
            .
        </div>

它试图将每个“grid-item1/2...”包装到另一个名为“grid-item-style”的 div 中，如下所示：

    <div class="grid-item-style">
        <div class="grid-item1">
            <div class="grid-name">
                <p class="skill">Attack</p>
            </div>
            <div class="grid-image">
                <img src="/static/icons/Attack.png">
            </div>
            <div class="grid-rank">
                <p class="small">Current rank: 200000000</p>
            </div>
            <div class="grid-level">
                <p class="small">Current level:100</p>
            </div>
            <div class="grid-xp">
                <p class="small">Current XP: 200000000</p>
            </div>
        </div>
    </div>

并改变它的悬停效果，但它没有工作。

有什么想法吗？

谢谢

【问题讨论】：

标签： html css

【解决方案1】：

给每个网格项另一个类 ex。网格项目和样式在你的 CSS 中

<div class="grid-item1 grid-item">

<div class="grid-item2 grid-item">

在css中

.grid-item1{...}
.grid-item2{...}
.grid-item{...}

【讨论】：

我试过了，但由于某种原因，它只适用于 grid-item1，即使我将它添加到 grid-item2,3 等等。
想不出原因。你是如何从 css 中引用它的？ .grid-item{} ?
对不起，这是我的错。成功了，谢谢大佬

【解决方案2】：

你可以给他们一个通用的类，然后给这个类添加样式

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。