鼠标悬停，只把文字加粗，下划线正常答案

【问题标题】：mouse hover, make only the text bold , the underline should be normal鼠标悬停，只把文字加粗，下划线正常
【发布时间】：2012-07-13 13:44:12
【问题描述】：

简单的html和css。

代码：

   <div class="link_my"> <a href="a.php">my link</a></div>

css:

.link_my a:hover{

font-weight:bold;
text-decoration:underline;

}

鼠标悬停时，文本字体与下划线一起变为粗体。但我希望下划线正常（不是粗体）。

怎么做？

【问题讨论】：

标签： html css

【解决方案1】：

这对你 Istiaque 有用。 JS FIDDLE 链接：http://jsfiddle.net/39TtM/

HTML：

<a href="#" class="link">
    <span>
        my link
    </span>
</a>

CSS：

.link span{
    color:blue;
    font-size:30px;
}

.link:hover span{
    font-weight:bold;
}

.link:hover{
    text-decoration:underline;
}

【讨论】：

【解决方案2】：

你可以使用border-bottom来代替

.link_my a:hover{

font-weight:bold;
text-decoration:none;
border-bottom:1px solid #ccc;

}

谢谢约翰

【讨论】：

【解决方案3】：

下划线是文本的一部分，它们不是不同的元素/部分。

解决此问题的一种方法是使用border 而不是下划线：

.link_my a {
    text-decoration: none;
    border-bottom: 1px solid #000;
}
.link_my a:hover{
    font-weight:bold;
}

【讨论】：

【解决方案4】：

如果使用 line-height（也可能是 display:block），Aditya 的解决方案可能更可取 > 否则（当使用border-bottom 时）下划线将出现在块元素下方而不是根据需要在文本下方。

【讨论】：

请澄清大卫回答之外的含义。
为了澄清和超越（你是对的，艾哈迈德）>为了获得这里想要的视觉输出，在这两种情况下（！）都需要添加一个额外的元素，或者保持边框-底部直接在文本下方（而不是在包含它的可见元素下方）或将下划线样式与粗体样式分开。 >>>所以aditya的解决方案可能会更好，因为它更接近设计逻辑
为什么这是一个答案，而不是评论？