html - CSS3 动画图像不会按预期响应

Question

我有this摆弄我有 4 张图片的地方。悬停其中一个时，右侧的图像会正确改变它们的大小，但我不明白为什么当我明确声明我希望所有图像都以相同的方式运行时，左侧的图像没有运行相同的模式。

有人可以帮帮我吗？

这是 html， fiddle 中的 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 中处理悬停事件。

但我会说保持原样，即使没有左手元素缩放也很好 ;)