悬停另一个div时如何旋转图像？答案

【问题标题】：how to rotate image when hover another div?悬停另一个div时如何旋转图像？
【发布时间】：2013-06-25 10:39:20
【问题描述】：

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

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

【问题讨论】：

看这里：stackoverflow.com/questions/6910049/…

标签： css

【解决方案1】：

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

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

Here 是一个工作示例。

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

【讨论】：

你能帮我一步一步吗！谢谢
现在当我悬停“Hello world”图像旋转时，但是当我悬停图像时它无法旋转。如何解决？谢谢！
我更新了我的答案。如果一切正常，请考虑接受我的回答:)
谢谢，我添加 css : .rotate:hover { -webkit-transform:rotate(360deg); -moz 变换：旋转（360 度）； -o-变换：旋转（360度）；并且当我悬停图像或 div 类 ABC 时它可以旋转。你能给我你的联系方式：facebook 或 gmail...谢谢？
现在我正在学习网页设计，我看到你精通 jquery ......你可以在未来帮助我一些关于 jquery 的事情。对不起，如果它让你介意！

【解决方案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);
}

【讨论】：