旋转图像悬停div

Question

我试图确保当我把父母<div>，<img>里面的div应该旋转360度（例如悬停文本，或者中间的空间也应该旋转图像）

这是我的jsfiddle - http://jsfiddle.net/FmLbd/

我认为它可能是真实的东西简单，但我似乎无法弄清楚如何才能使这个“简单”的影响工作而改变。

Answer 1

只要改变你的CSS到：

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

相反的：

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

希望这有助于！

JSFiddle Example

Answer 2

div:hover > img { 
-webkit-transform:rotate(360deg); 
-moz-transform:rotate(360deg); 
-o-transform:rotate(360deg); 

}

2方法：旋转直接子带班.rotate（更特异性）

div:hover > img.rotate { 
-webkit-transform:rotate(360deg); 
-moz-transform:rotate(360deg); 
-o-transform:rotate(360deg); 

}

第三方法的img：旋转时父母div被徘徊。与类名.rotate辅助子img标签将旋转（那么具体比2日）

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

}

当U悬停父DIV你立即IMG的孩子会旋转360度

check here

Answer 3

有很多方法可以做到这一点，如jQuery，但对CSS只是改变你的CSS来

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

Answer 4

你应该使用嵌套的选择...

.onethirdcolumn:hover .rotate {/*add css effects here*/} 

这个CSS匹配具有类是元素与“onethirdcolumn”当它盘旋着一个孩子的任何元素“旋转”。所以实际上，当它的父类'onethirdcolumn'类被徘徊时，设置'旋转'类的样式。

希望这会有所帮助。