css - 将鼠标悬停在图像、其他图像和 h2 上时使图像旋转

Question

我需要一个图像旋转 180° 当悬停该图像并且悬停另一个图像时，h2 应该使第一个图像旋转

我尝试了多种代码，纯 css，还有 css 和 jquery

所以我使用下面的 css 代码旋转了第一张图片

.circle_img{  
  position: absolute;
  margin-top:-10px;
}
.circle_img:hover {
  transform: rotate(180deg);
}

<img class="circle_img" src="https://via.placeholder.com/150">

所以我有点卡在这里:(我给了另一个 img 和 h2 一个名为 img-rotate 的类，但现在我不知道如何继续

提前致谢

Answer 1

添加 transition: 1s ease all; 到你的代码中。

.circle_img{  
  position: absolute;
  margin-top:-10px;
  transition: 1s ease all;
}
.circle_img:hover {
  transform: rotate(180deg);
}

<img class="circle_img" src="https://via.placeholder.com/150">