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

使用此代码，当我悬停IMAGE类＆＃34;旋转＆＃34;时，它将旋转360度。

但现在我想：当用户悬停div类＆＃34; ABC＆＃34;时，IMAGE将自动旋转360度。

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

Answer 1

将悬停效果放在类hovered中并使用此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);
}

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

2 个答案: