html - 无法悬停在 img 元素上，当 img 悬停时无法旋转元素

Question

这是代码 jsfidlle 代码。

这需要一点解释。我想要的是当我将鼠标悬停在图像 .profile__头像。

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