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

Question

简单的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;

}

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

怎么做 ？

Answer 1

这对你 Istiaque 有用。JS 小提琴链接：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;
}

Answer 2

您可以改用border-bottom

.link_my a:hover{

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

}

谢谢约翰

Answer 3

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

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

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

JS 小提琴演示。

Answer 4

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