CSS3動畫圖像不會如預期般響應

Question

我有this小提琴，我有4張圖片。當鼠標懸停時，右邊的圖片會正確地改變它們的大小，但我不明白爲什麼圖片左邊的圖片沒有運行相同的圖案，因爲我明確表示我希望所有圖片的行爲方式相同。

有人可以幫我嗎？

這是HTML，CSS在撥弄

<a href="#" class="social1" ><img src="http://img24.imageshack.us/img24/3221/32845401.png" alt="img1" id="btnSocialStyle" /></a> 
<a href="#" class="social2" ><img src="http://img24.imageshack.us/img24/3221/32845401.png" alt="img1" id="btnSocialStyle" /></a> 
<a href="#" class="social3" ><img src="http://img24.imageshack.us/img24/3221/32845401.png" alt="img1" id="btnSocialStyle" /></a> 
<a href="#" class="social4" ><img src="http://img24.imageshack.us/img24/3221/32845401.png" alt="img1" id="btnSocialStyle" /></a> 

Answer 1

你的問題是，你只能用「〜」 - 運算符給定元素的元素後觀看。據我所知即使在CSS 3.0中也不可能選擇向後/向上。這總是需要一個jQuery/Javascript解決方案。所以你需要在JS中處理懸停事件。

但我會說保持它，因爲它是好的，即使沒有左手元素縮放;）