旋轉圖像懸停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'類被徘徊時，設置'旋轉'類的樣式。

希望這會有所幫助。