Html CSS3动画图像将不会按预期响应

我有小提琴，我有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>

---

您的问题是，您只能使用~-运算符查看给定元素之后的元素。据我所知，即使在CSS 3.0中也不可能选择后退/向上。这总是需要jQuery/Javascript解决方案。因此，您可能需要在JS中处理悬停事件

但我要说的是，保持原样，即使没有左手元素缩放，也很好