Css 将鼠标悬停在另一个div上时如何旋转图像？

代码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>

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

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

怎么做？ 有人可以帮我。

---

多谢各位

在类中放置悬停效果

悬停

，并使用以下jQuery代码：

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

这是一个有效的例子

更新：

尝试以下操作：

CSS:

---

看这里：你能一步一步地帮我吗！谢谢当我悬停“Hello world”图像旋转时，但当我悬停图像时，它无法旋转。如何修复它？感谢我更新了我的答案。请考虑接受我的答案，如果你一切都好的话：谢谢，我添加CSS：.Roo:HOVER {-WebKIT变形：旋转（360DEG）；-MOZ变换：旋转（360DEG）；-O-变换：旋转（360DEG）；}它可以在我悬停图像或DIV类ABC时旋转。你能给我你的联系方式吗：facebook或gmail。。。谢谢？现在我正在学习网页设计，我看到你能流利地使用jquery。。。将来您可以帮助我了解jquery。对不起，如果你介意的话！

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

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