将鼠标悬停在网格项上时，在网格项内的 img 上应用动画

Question

我创建了一个包含 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>

这段代码现在所做的是当我悬停它时整个网格项目旋转。

谢谢

Answer 1

问题是您正在旋转整个元素（.grid-style）。

要仅旋转其 img 子项，您可以先 select 具有伪 class 的 .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>

Answer 2

在动画中按照下面的方式使用选择器即可属性。

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

将鼠标悬停在网格项上时，在网格项内的 img 上应用动画

Apply animation on img inside grid item when hover on grid item

html

css

css-animations