Как удалить подчеркивание с изображения, обернутого в якорь?

Question

Во всяком случае, у меня есть проблема. Я полагаю, это крошечная проблема, но она меня беспокоит. Я обновил CSS для своих якорей в своем блоге, чтобы они были подчеркнуты рамкой. Проблема в том, что все мои изображения, которые были связаны, подчеркнуты, и это выглядит неправильно.

Поэтому я предполагаю, что единственный способ исправить это - применить класс CSS ко всем изображениям внутри якорей, чтобы они имели border: none;. Я не знаю, как это сделать, хотя. Кто-нибудь готов объяснить, возможно ли это? Заранее спасибо.

Answer 1

Попробуйте это:

<style type="text/css">
a img { text-decoration: none } // Images within 
</style>

Тем не менее, это очень общее правило, и если у ваших якорей есть отступы, оно не будет работать полностью, могут быть остатки подчеркивания справа и слева от вашего изображения.

Было бы лучше вообще отключить подчеркивание для ссылок, определить класс CSS для ваших якорей и включить подчеркивание в этом классе:

a { text-decoration: none }
a.my_anchor_class { text-decoration: underline }

Answer 2

Попробуйте это:

a img { border:none; vertical-align:top; }

Перемещает подчеркивание вверх и внизу изображения.

Answer 3

В jQuery вы можете использовать селектор has , чтобы добавить класс ко всем ссылкам, в которых есть изображение:

$('a:has(img)').addClass('image-link');

Затем удалите границу из этих ссылок в вашем CSS:

a.image-link {
    border-bottom-style: none;
}

Это будет работать только при включенном JavaScript.

Answer 4

Подчеркивание контролируется CSS-свойством text-decoration. Так что, если вы хотите отключить это:

a { text-decoration: none; }