懸停時超鏈接的下劃線

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

你幾乎明白了。僅在main類中輸入text-decoration:underline;。

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