在文本悬停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结束：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;