我有一个包含两个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 */
}
答案 0 :(得分:4)
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; }
答案 1 :(得分: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;
}
答案 2 :(得分:2)
在这里分叉并修复:http://jsfiddle.net/CtD8M/
只需将特定范围设置为文本修饰下划线,而不是全局设置
答案 3 :(得分: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;
}
答案 4 :(得分:2)
a:hover span {
text-decoration:none;
}
a:hover .main{
text-decoration: underline;
}
就像风格一样,我从不使用文字装饰,而是使用border-bottom而不是填充。
答案 5 :(得分: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;
}