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;

}

マウスをホバーすると、テキストフォントが下線とともに太字になります。しかし、下線は通常（太字ではなく）にしたいです。

どうやってするか？

score 11 · Accepted Answer

これは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;
}

score 4 · Accepted Answer

代わりに border-bottom を使用できます

.link_my a:hover{

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

}

ありがとうジョン

score 0 · Accepted Answer

下線はテキストの一部であり、個別の要素/部分ではありません。

これを回避する 1 つの方法はborder、下線の代わりに使用することです。

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

score 0 · Accepted Answer

line-heightを使用する場合(おそらく display:block も)、Aditya の解決策が望ましいかもしれません > そうでない場合 (border-bottom を使用する場合)、必要に応じてテキストの下ではなくブロック要素の下に下線が表示されます。

4 に答える 4