鼠标悬停，只使文字加粗，下划线应正常

Question

simple html and css.

code:

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

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 ?

Answer 1

This will work for you 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

You could use border-bottom instead

.link_my a:hover{

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

}

Thanks John

Answer 3

The underline is part of the text, they're not distinct elements/parts.

One way around this is to use border rather than an underline:

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

JS Fiddle demo .

Answer 4

在使用行高 （也可能是显示：块）的情况下，Aditya的解决方案可能更可取> else（当使用border-bottom时）下划线将出现在block-element下而不是根据需要出现在text下。