Текстовое оформление для ссылки и диапазона внутри этой ссылки - PullRequest
Новая
       29

Текстовое оформление для ссылки и диапазона внутри этой ссылки

5 голосов
/ 30 декабря 2011

У меня есть такие ссылки, как: 

<a href="#">Link text<span>Link sub-text</span></a>

При наведении курсора мне нужно, чтобы текст внутри span не подчеркивался подчеркиванием (но текст основной ссылки -). Является ли это возможным? Я пробовал: 

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

Это не работает.

Есть ли какое-то решение для этого?

Ответы [ 4 ]

5 голосов
/ 15 октября 2012

Добавьте текст ссылки (текст, который вы хотите оформить подчеркиванием) внутри <span> и подтекст снаружи как обычный текст ссылки, например:
<a href="#"><span>Link text</span>sub-text</a>

Для оформления текста ссылки используйте: 

a:hover {
  text-decoration:none;
} 
a:hover span {
  text-decoration:underline;
}
1 голос
/ 02 апреля 2014

Простое решение - использовать свойства color и border вместо text-decoration.Сначала нужно установить text-decoration: none, а затем использовать border-bottom в качестве подчеркивания для всех ваших ссылок.

style.css 

a, a:link, a:visited
{
color: #11bad3;
text-decoration: none;
border-bottom: 1px solid #11bad3;
}

a:hover, a:active 
{
background: #00a9c2;
border-color: #00a9c2;
color: #fff;
}

print.css 

a, a:link, a:visited 
{
border-bottom: 0px;
}

index.html 

<link rel="stylesheet" href="assets/css/style.css" type="text/css" media="all">
<link rel="stylesheet" href="assets/css/print.css" type="text/css" media="print">
0 голосов
/ 30 января 2017

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

Вместо того, чтобы пытаться использовать text-decor: underline, вместо этого просто использовать border-bottom: 1px solid # 000, таким образом, вы можете просто сказать border-bottom: none,

0 голосов
/ 07 января 2012

Другое решение - использовать цвета вместо подчеркивания в качестве идентификатора: 

<a id="outer-link" href="#">
    Outer text <span id="inner-text">inner text</span> more outer text.
</a> 

<style>
    a { text-decoration: none; }
    #outer-link:hover { color: green; }
    #outer-link:hover #inner-text { color: red; }
</style>
...