悬停时为超链接的一部分添加下划线

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 {    文字装饰：无;    字体粗细：粗体;}A：悬停跨度{    文本装饰：下划线;           }a span.caption {    颜色：灰色;    字体粗细：正常;}a：hover span.caption {    文字装饰：无;}​

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

就像一种风格一样，我从不使用文本装饰，而是使用底部边框，并带有一些填充。

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