Базовый CSS: когда вы применяете эффекты к изображениям в CSS, как вы исключаете изображение баннера?

Question

У меня есть немного CSS, из-за которого изображения появляются немного, когда вы наводите курсор на них:

a img 
{
    -webkit-transition: -webkit-transform 0.3s ease;
    -moz-transition: -moz-transform 0.3s ease;
    -o-transition: -o-transform 0.3s ease;
    transition: transform 0.3s ease;
}

a:hover img 
{
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);

    -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    -o-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}

Проблема в том, что это относится ко всем изображениям, включая мой баннер. Есть ли способ исключить изображение баннера?

Answer 1

Если вы можете сослаться на это изображение баннера с помощью класса или идентификатора, и вы согласны отвергнуть пользователей IE8, селектор CSS3 :not() может творить чудеса.

Jsfiddle для васвзглянуть на .
Обновление вышеупомянутого Fiddle, немного более сложное .

Кроме IE8, любой другой крупный браузер и IE9 , есть поддержка для этого.Поддержка Firefox и Safari восходит к версии 1, если этот сайт верен.

Answer 2

Ссылка на все всплывающие изображения с именем класса. Это отделит их от изображений, которые не имеют класса.

Пример:

<img class="hoverme" src=".." />
<img class="hoverme" src=".." />
<img src=".." />

.hoverme:hover{
  ..
}

Будут обработаны только изображения с классом hoverme.

Answer 3

Конечно, но выглядит не очень элегантно.Если ваш баннер имеет id, просто переопределите эти атрибуты (надеюсь, я знаю, что делаю):

a img#banner
{
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
}

a:hover img#banner
{
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    transform: none;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
}