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

Question

我正在做一个网站，当我想放置一个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…"放到另一个div中例如"grid-item-style"这样的:

<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>

并改变它的悬停效果，但它不起作用

任何想法?

谢谢

Answer 1

为每个网格项指定另一个类，例如grid-item，并在css中设置该类的样式

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

和css

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

Answer 2

你可以给他们一个共同的类，并将样式添加到这个