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

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

CSS

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

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

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

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

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

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

Пример в реальном времени (попробуйте навести верх над логотипом в левом верхнем углу)

Ответ 1

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

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

Ответ 2

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

Это должно сделать трюк.

Ответ 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>

Ответ 4

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

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

Ответ 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, удаляет все эффекты из ссылки, которая содержит изображение данных форматов.

Ответ 6

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

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

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

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

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

Ответ 7

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