css - 悬停另一个div时如何旋转图像？

Question

代码 HTML：

<div class="images-rotate">
 <a href="link login">
   <img class="rotate" src="http://localhost/design/images/h_login.png" width="100px" /> 
 </a>
</div>


<div class="ABC">
 <p>
  HELLO WORLD !
 </p>
</div>

代码CSS：

.rotate{
-webkit-transition-duration: 0.8s; 
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;

-webkit-transition-property: -webkit-transform; 
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;

overflow:hidden;

} 

.rotate:hover 
{
-webkit-transform:rotate(360deg); 
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
} 

使用此代码，当我将图像类“旋转”悬停时，它将旋转 360 度。

但现在我想要：当用户悬停 div 类“ABC”时，IMAGE 将自动旋转 360 度。

怎么做 ？有人可以帮助我。非常感谢 ！

Answer 1

将悬停效果放在一个类中hovered并使用此 jQuery 代码：

 $(".ABC").on('hover',function() {
           $("img").toggleClass("hovered");
        });

这是一个工作示例。

更新：http: //jsfiddle.net/KT3gL/2/

Answer 2

尝试这个 ：

http://jsfiddle.net/KzFL4/5/

CSS：

.ABC p{
-webkit-transition-duration: 0.8s; 
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;

-webkit-transition-property: -webkit-transform; 
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
    cursor:pointer;
   overflow:hidden;
 } 

.ABC p:hover 
{
-webkit-transform:rotate(360deg); 
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}