Как выделить текст, но не изображения, в CSS

Question

Простой вопрос: у меня есть следующая разметка ...

<a href='#'>
  <img src='icon.png'> This is the link
</a>

Я хочу, чтобы при наведении курсора текст подчеркивался.

Что такое CSS-селектор для выбора только текста в этом <a> элементе и ничего больше? Я бы не стал ничего оборачивать, если мне не нужно.

a:hover {
  text-decoration: none;
}
a:hover <select_text_here> {
  text-decoration: underline;
}

Answer 1

a:hover {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

a img{
   text-decoration: none;
}

должен это сделать.Таким образом, все теги img внутри a будут без подчеркивания.

Answer 2

a:hover {
  text-decoration: underline;
}
a:hover img {
  text-decoration: none;
}

еще одна вещь, которую вы можете сделать, это

a{
    background: url(icon.png); background-repeat: no-repeat; padding-left: 10px
}

или аналогичный, поэтому вам не нужно указывать элемент изображения в ссылке

Answer 3

Возможно, попробуйте это:

a:hover {
  text-decoration: underline;
}
a:hover IMG {
  text-decoration: none;
}

Answer 4

Поскольку текст не имеет какой-либо отдельной «ручки», которую вы могли бы выделить, лучшее, что вы можете сделать, это подчеркнуть весь тег a, который включает изображение. Само изображение технически не будет подчеркнуто, поэтому вы даже не можете «подчеркнуть его».

Вам придется либо отделить изображение от текста, либо обернуть текст в span и только выделить его.

Answer 5

Текст должен быть в своем собственном элементе, чтобы его можно было выбирать в CSS. Вы должны использовать span или аналогичный:

<a href="#"><img src="" /><span class="link-text">Foo</span></a>

Очевидно, что затем вы можете просто использовать .link-text, чтобы выбрать его.

Answer 6

Я вижу, что Opera / IE не подчеркивает изображение, но FF делает. Самый простой способ исправить это - добавить элемент span:

<a href="..."><img ... /> <span>...</span></a>

А затем применить text-decoration к span элементу:

a:hover span {
  text-decoration: underline;
}

Насколько я знаю, вы не можете выделить только текст.