懸停時超鏈接的下划線部分

Question

我有一個包含兩個span元素的復合超鏈接，其中一個要在懸停時加下划線，而另一個則不行。 一個很好的例子是在Twitter推文頂部找到的名稱/用戶名鏈接對。 我只是不知道他們是怎么做到的。

我的嘗試：

HTML：

<a href="http://www.google.com">
<span class="main">My link</span>
<span class="caption"> and caption</span>
</a>​

CSS：

a {
    text-decoration:none;
    font-weight:bold;
}
a:hover {
    text-decoration:underline;            
}
a span.caption {
    color:gray;
    font-weight:normal;
}
a span.caption:hover {
    text-decoration:none; /* I want this to portion to not be underlined, but it still is */
}

小提琴： http ： //jsfiddle.net/vgKSh/1/

Answer 1

a {
    text-decoration:none;
    font-weight:bold;
}
a:hover span{
    text-decoration:underline;            
}
a span.caption {
    color:gray;
    font-weight:normal;
}
a:hover span.caption {
    text-decoration:none;
}
​

Answer 2

差不多了 將text-decoration:underline; 僅在main班。

a {
    text-decoration:none;
    font-weight:bold;
}
a span.caption {
    color:gray;
    font-weight:normal;
}
a span.main:hover {
    text-decoration:underline;
}

http://jsfiddle.net/vgKSh/9/

Answer 3

在此處分叉並修復： http : //jsfiddle.net/CtD8M/

僅將特定范圍設置為文本裝飾下划線，而不是全局設置

Answer 4

小提琴： http : //jsfiddle.net/vgKSh/4/

a {
    text-decoration:none;
    font-weight:bold;
}
a:hover span.main {
    text-decoration:underline;            
}
a span.caption {
    color:gray;
    font-weight:normal;
}
a:hover span.caption {
    text-decoration:none;
}

Answer 5

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

a:hover .main{
    text-decoration: underline;            
}

就像樣式一樣，我從不使用文本修飾，而是使用border-bottom代替，並帶有一些填充。

Answer 6

a {
    text-decoration:none;
    font-weight:bold;
}
a:hover {
    text-decoration:none;            
}
a span.caption {
    color:gray;
    font-weight:normal;
}
a span.main:hover {
    text-decoration:underline;
}