reuse css hover stlye for different grid items-CodePudding

I'm working on a website when I want to place a 3x9 grid.

The items in that grid should be in a specific place inside the grid so I basically created 27 grid items where in each one I set the row and column as follows:

.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;
}

and so on.

Now, I had like to add an effect that will make each grid item to move once the mouse is hovering.

Does it mean that I need to create now 27 .grid-item(X):hover for each one of them? It doesn't make sense to me but I could make anything else to make it work.

The way my HTML is built is:

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

It tried to wrap each "grid-item1/2..." into another div called for example "grid-item-style" like this:

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

and to change the hover effect on it but it didn't work.

Any ideas?

Thank you

CodePudding user response：

You can give them a common class and add the styling to this one

CodePudding user response：

Give every grid item another class ex. grid-item and style that class in your css

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

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

And in css

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