Как избежать: hover, чтобы действовать на img в CSS?

Question

Предположим, у меня есть следующий селектор:

a       { padding: 1em; }
a:hover { backgrond-color: #FF0000; }

И предположим, у меня есть следующий HTML-код:

<a href="http://stackoverflow.com"><img src="so.jpg"></a>

В результате <img> получает красный фон при наведении мыши.

Есть идеи как это исправить?

Спасибо, Бода Кидо!

Answer 1

jQuery('a').hover(function(){
    jQuery(this).has('img').css('background', 'none');
});

Answer 2

Мне интересно, как вы видите красный фон через JPG. Тем не менее, это должно сделать свое дело.

a:hover img { 
  background:transparent; 
}

Answer 3

Поскольку изображение непрозрачное, в большинстве случаев достаточно просто убрать границу и отступы, чтобы скрыть отображение красного цвета.

a img { border: none; padding: 0; margin: -1em; }

Отрицательное поле для отмены a отступа

Answer 4

Либо более конкретно о вашем a:hover селекторе

.something a:hover { background-color: #ff000; }

Или создайте другой селектор, который блокирует изменение фона в тех случаях, когда вы не хотите, чтобы он

a.no-bg-change:hover { background: none !important; }

<a href="http://stackoverflow.com" class="no-bg-change"><img src="so.jpg"></a>

Answer 5

Это странно, вы говорите сделать a с фоном, но только если есть изображение, то не надо. А что если ссылка имеет и текст, и изображение? Сделайте это проще, просто скажите точно, что вы хотите. Я полагаю, вы могли бы сделать это, например:

<a href="..."><img src="so.jpg"></a>
<a href="..."><span class="text">some text</span></a>
<a href="..."><span class="text">some text</span> and <img src="so.jpg"></a>

a .text { padding: 1em; }
a:hover .text {background-color:#ff0}

Answer 6

Хорошо, вы мне не поверите, но у меня была та же проблема, описанная выше, и я решил следующим образом:

У меня было что-то вроде этого:

<a href="#">
<img src"path/to/image.gif">
</a>

И в моем CSS у меня было:

a:hover { text-decoration: underline; }

И, поверьте мне, мне просто нужно было поместить тег 'img' в ту же строку, что и тег 'a', например:

<a href="#"><img src="path/to/img.gif"></a>

И это было все !!!