Блог

Я создал элемент сетки, в котором есть 5 элементов, и он выглядит следующим образом:

Я хотел бы добавить анимацию, как только мышь наведет курсор на элемент сетки, но я хочу, чтобы он анимировал только элемент grid-img . Я имею в виду, что если пользователь наведет курсор на любое место в элементе сетки, я хочу, чтобы он делал анимацию только на grid-img .

Для этого я использую следующий CSS:

 .grid-item {
  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: 8;
  height: auto;
  width: auto;
  padding: 5px;
}

.grid-name {
  grid-column-start: 1;
  grid-row-start: 1;
}

.grid-image {
  grid-column-start: 1;
  grid-row-start: 2;
  grid-row-end: 4;
}

.grid-level {
  grid-column-start: 2;
  grid-row-start: 1;
  justify-self: left;
}

.grid-rank {
  grid-column-start: 2;
  grid-row-start: 2;
  justify-self: left;
}

.grid-xp {
  grid-column-start: 2;
  grid-row-start: 3;
  justify-self: left;
}

.grid-style:hover {
  animation: rotation 4s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(359deg);
  }
}
 

и в моем HTML:

 <div class="grid-item grid-style">
    <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>
 

что этот код делает прямо сейчас, так это то, что весь элемент сетки вращается при наведении на него указателя мыши.

Спасибо

Проблема в том, что вы вращаете элемент wole (в стиле сетки).

Чтобы повернуть только его дочерний элемент img, вы можете сначала выбрать стиль .grid с наведением псевдокласса, а затем дочерний элемент:

 .grid-style:hover .grid-image {
  animation: rotation 4s infinite linear;
}
 

 .grid-item {
  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: 8;
  height: auto;
  width: auto;
  padding: 5px;
}

.grid-name {
  grid-column-start: 1;
  grid-row-start: 1;
}

.grid-image {
  grid-column-start: 1;
  grid-column-start: 1;
  grid-row-start: 2;
  grid-row-end: 4;
}

.grid-level {
  grid-column-start: 2;
  grid-row-start: 1;
  justify-self: left;
}

.grid-rank {
  grid-column-start: 2;
  grid-row-start: 2;
  justify-self: left;
}

.grid-xp {
  grid-column-start: 2;
  grid-row-start: 3;
  justify-self: left;
}

.grid-style:hover .grid-image {
  animation: rotation 4s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(359deg);
  }
} 

 <div class="grid-item grid-style">
  <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> 

Просто используйте селектор способом, указанным ниже в свойстве анимации.

 .grid-style:hover .grid-image {
  animation: rotation 4s infinite linear;
}