如何在另一个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> 

CODE 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); 
} 

有了这个代码，当我悬停图片类 “旋转”，它会旋转360deg。

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

怎么办？ 有人可以帮助我。 非常感谢！一类hovered

Answer 1

认沽悬停效果和使用jQuery代码：

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

Here是一个工作的例子。

更新：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); 
}