Html 鼠标悬停，只将文字加粗，下划线应该正常
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11471709/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
mouse hover, make only the text bold , the underline should be normal
提问by Istiaque Ahmed
simple html and css.
简单的html和css。
code:
代码：
<div class="link_my"> <a href="a.php">my link</a></div>
css:
css：
.link_my a:hover{
font-weight:bold;
text-decoration:underline;
}
on mouse hover, the text font becomes bold along with the ubderline. But I want the underline to be normal (not bold).
在鼠标悬停时，文本字体与下划线一起变为粗体。但我希望下划线是正常的（不是粗体）。
How to do that ?
怎么做 ？
回答by AdityaSaxena
This will work for you Istiaque. JS FIDDLE LINK : http://jsfiddle.net/39TtM/
这对你 Istiaque 有用。JS小提琴链接：http: //jsfiddle.net/39TtM/
HTML:
HTML：
<a href="#" class="link">
<span>
my link
</span>
</a>
CSS:
CSS：
.link span{
color:blue;
font-size:30px;
}
.link:hover span{
font-weight:bold;
}
.link:hover{
text-decoration:underline;
}
回答by JohnC
You could use border-bottom instead
你可以使用 border-bottom 代替
.link_my a:hover{
font-weight:bold;
text-decoration:none;
border-bottom:1px solid #ccc;
}
Thanks John
谢谢约翰
回答by David says reinstate Monica
The underline is part of the text, they're notdistinct elements/parts.
下划线是文本的一部分，它们不是不同的元素/部分。
One way around this is to use borderrather than an underline:
解决此问题的一种方法是使用border而不是下划线：
.link_my a {
text-decoration: none;
border-bottom: 1px solid #000;
}
.link_my a:hover{
font-weight:bold;
}?
回答by sasha
In case of using line-height(maybe display:block too), Aditya's solution might be preferable > else (when using border-bottom) the underline would appear under the block-element instead of under the text as desired.
在使用行高（也可能是 display:block）的情况下，Aditya 的解决方案可能更可取 > 否则（当使用 border-bottom 时）下划线将出现在块元素下，而不是根据需要出现在文本下。
