CSS 在头像图像上以相反方向旋转 2 个图像

Question

当将鼠标悬停在中央图像时，这应该同时为相反方向的 2 个圆圈部分设置动画。到目前为止，我只能通过将 2 个对象分别悬停来分别为它们制作动画。

目标如下:

这是我的 CodePen: http://codepen.io/beng_beng/pen/Azstr

Answer 1

您应该在 a#rotator 上使用 :hover 代替:

a#rotator:hover > img{ 
 -webkit-transform: rotate(-360deg); 
 -moz-transform: rotate(-360deg); 
 -o-transform: rotate(-360deg);
 -ms-transform: rotate(-360deg); 
}

a#rotator:hover span img{ 
 -webkit-transform: rotate(360deg); 
 -moz-transform: rotate(360deg); 
 -o-transform: rotate(360deg);
 -ms-transform: rotate(360deg); 
}

Demo.