Сделать a:hover img без подчеркивания (underline)

Имеем следующую структуру html элементов:

<a href="...">
  <img src="..." />текст
</a>

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

 

Как сделать, чтобы IMG не подчеркивался?
Оказывается очень просто:
1 вариант: Сделать изображение фоновым. Может возникнуть масса неудобств.
2 вариант: Обернуть изображение IMG в DIV-тег. (Также как вариант обернуть текст в span и назначить a:hover span {text-decoration:underline;})

<a href="...">
  <div><img src="..." /></div>текст
</a>

0 comments so far:

Отправить комментарий

  • HTML-теги запрещены
  • Строки и параграфы переносятся автоматически.

Подробнее о форматировании

Image CAPTCHA