HTML: удалить: hover для изображений?

Question

Для текста ссылок, у меня есть:

CSS:

a:link {color: #3366a9; text-decoration: none}
a:hover {border-bottom: 1px solid; color: black}

Но это также добавляет черное подчеркивание для связываемых IMG , которые я не хочу.

Как удалить border-bottom на связанных IMG при наведении курсора с помощью CSS?

Я пробовал следующее:

a:hover img {border-bottom: 0px}

Но это не работает

Живой пример (попробуйте навести курсор на логотип в левом верхнем углу)

Answer 1

Если вы перемещаете свои изображения по сравнению со встроенными, это будет работать и не потребует никаких модификаций атрибутов ссылок на изображения, которые требует ответ Стива.

a:hover img {
border: none !important;
display: block;
}

Answer 2

a:hover img {border-bottom: 0px;}

Это должно сработать.

Answer 3

Не уверен, что это лучшее решение, но оно работает:

    a:link {color: #3366a9; text-decoration: none}
    a:hover {border-bottom: 1px solid black; }

    .aimg:link {color: #3366a9; text-decoration: none}      
    .aimg:hover { border-bottom: none; }

Затем установите якоря с изображениями в класс «aimg»:

<a class="aimg" href="Test.htm"><img src="images/myimage.gif" /></a>

Answer 4

Я использовал jQuery для добавления класса «no-hover» ко всем тегам, содержащим изображение:

$('a > img').each(function() {
  $(this).parent().addClass('no-hover');
});

И в CSS я сделал это:

a.no-hover:hover {
  border-bottom: 0px
}

Если jQuery слишком тяжел для вас, вы можете использовать picoQuery . Это всего лишь 1 КБ, если только вы выберете метод .each ().

Answer 5

Нашел этот пример здесь: https://perishablepress.com/css-remove-link-underlines-borders-linked-images/

a[href$=jpg], a[href$=jpeg], a[href$=jpe], a[href$=png], a[href$=gif] {
    text-decoration: none;
    border: 0 none;
    }

Полагаю, это именно то, что вы хотите.
Прекрасно работает в Firefox, удаляет все эффекты по ссылке, которая содержит изображения заданных форматов.

Answer 6

это работало для меня также в IE. IE отображал границы, но теперь это не так.

a img {/*whatever you need*/
border: none !important;
}
a img:hover{/*whatever you need*/
}

Answer 7

Вы пробовали a img {border:none}?