鼠標懸停，只使文字加粗，下划線應正常

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;

}

鼠標懸停時，文本字體與ubderline一起變為粗體。 但我希望下划線是正常的（不是粗體）。

怎么做？

Answer 1

這對你有用Istiaque。 JS FIDDLE LINK： 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;
}

Answer 4

在使用行高（也可能是顯示：塊）的情況下，Aditya的解決方案可能更可取> else（當使用border-bottom時）下划線將出現在block-element下而不是根據需要出現在text下。