无法将鼠标悬停在 img 元素上，无法在 img 悬停时旋转元素

Question

这是代码jsfidlle代码。

这需要一点解释。 我想要的是将图像悬停在.profile__avatar时.profile__photo--border-1和.profile__photo--border-2(带有蓝色边框)旋转 2 个元素。

.profile__avatar根本不应该变换，只有它周围带有蓝色边框的 2 个div元素应该旋转。

代码片段：

<div class="profile__photo">
<div class="profile__photo--border-1"></div>
<div class="profile__photo--border-2"></div>
<img class="profile__avatar" src="https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png" alt="profile photo">
</div>

CSS在这里，只是一个片段

img.profile__avatar {
---
z-index: 20;  // Doesnt work ..
&:hover {
cursor: pointer; // Can't hover, the  image is always behind the 2 borders element
}
/* Trying with border-1, border-2 should be the same but -360deg rotate */
&:hover .profile__photo--border-1 {
transform-origin: 50% 50%;
transform: translate(-50%, -50%) rotate(360deg);
}
}

Answer 1

你的图像上有元素，所以要使它们工作，你可以删除它们并添加一个过渡

https://jsfiddle.net/Laavz8br/

...
transition: transform 1s ease-in;
...

Answer 2

这是答案。您正在将其旋转 360 度。此代码会将图像旋转 180 度。

.profile__avatar:hover {
transform: rotate(180deg);
}

<div class="profile__photo">
<div class="profile__photo--border-1"></div>
<div class="profile__photo--border-2"></div>
<img class="profile__avatar" src="https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png" alt="profile photo">
</div>