Question

我有以下链接：

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

当悬停时我需要跨度内的文字没有用下划线装饰（但是主链接文本是）。可能吗？我试过了：

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

这不起作用。

有没有解决方案？

Answer 1

在<span>内添加链接文字（要用下划线装饰的文字），在外面添加子文字作为普通链接文字，如：
<a href="#"><span>Link text</span>sub-text</a>

要装饰链接文字，请使用：

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

Answer 2

一个简单的解决方案是使用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">

Answer 3

另一种解决方案是使用颜色而不是下划线作为您的标识符：

<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>

Answer 4

我知道这是一个老帖子，但由于我遇到了同样的问题，并想出了一个解决方案，我想我还是会写它。

而不是尝试使用文本修饰：下划线，而只是使用border-bottom：1px solid＃000，这样，你可以简单地说border-bottom：none，

此链接内的链接和跨度的文本修饰

4 个答案: