0

我有一个包含两个跨度元素的复合超链接，其中一个我想在悬停时加下划线，另一个不加下划线。一个很好的例子是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/

4

6 回答 6

4 
一种 {
    文字装饰：无；
    字体粗细：粗体；
}
一：悬停跨度{
    文字装饰：下划线；            
}
一个 span.caption {
    颜色：灰色；
    字体粗细：正常；
}
一：悬停跨度。标题{
    文字装饰：无；
}
​</pre>
于 2012-05-31T21:31:28.433 回答
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/

于 2012-05-31T21:32:23.007 回答
2

在此处分叉并修复：http: //jsfiddle.net/CtD8M/

只需将特定跨度设置为文本装饰下划线，而不是全局设置

于 2012-05-31T21:32:43.747 回答
2

小提琴：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;
}
于 2012-05-31T21:33:03.157 回答
2 
a:hover span {
    text-decoration:none;            
}

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

作为一种风格，我从不使用 text-decoration 而是使用 border-bottom 来代替一些填充。

于 2012-05-31T21:33:27.000 回答
2 
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;
}
于 2012-05-31T21:34:41.197 回答