У меня есть эта скрипка, где у меня 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>
Ваша проблема в том, что вы можете смотреть только с ~ ~ -operator для элементов ПОСЛЕ данного элемента. Насколько я знаю, даже в CSS 3.0 невозможно выбрать назад/вверх. Это всегда требует решения jQuery/Javascript. Поэтому вам, возможно, нужно обработать событие hover в JS.
Но я бы сказал, держите его как есть, он хорош даже без увеличения левого и правого элементов;)