html - 在文本悬停 css 上旋转图像

Question

现在我可以通过这段代码在 css 中悬停时旋转图像:

.spin1 img {
   -webkit-transition: -webkit-transform .8s ease-in-out;
   transition: transform .8s ease-in-out;
}
.spin1 img:hover {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}

但是当鼠标悬停在图片下方的文字上时，我还想旋转图片

Answer 1

您需要确保图像 及其文本 共享相同的父元素，这就是您需要的到 :hover over:

.spin1 > img {
  display: block; /* removes bottom margin/whitespace */
  -webkit-transition: -webkit-transform .8s ease-in-out;
  transition: transform .8s ease-in-out;
}

.spin1:hover > img {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}

<div class="spin1">
  <img src="http://via.placeholder.com/100x100" alt="img">
  Rotate
</div>