CODEWITHSUNDEEP
htmlcss
Istiaque Ahmed
Istiaque Ahmed

Reputation: 6488

mouse hover, make only the text bold , the underline should be normal

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 ?

Upvotes: 5

Views: 78568

Answers (4)

sasha
sasha

Reputation: 821

In case of using line-height (maybe display:block too), Aditya's solution might be preferable > else (when using border-bottom) the underline would appear under the block-element instead of under the text as desired.

Upvotes: 0

AdityaSaxena
AdityaSaxena

Reputation: 2157

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;
}

Upvotes: 11

David Thomas
David Thomas

Reputation: 253318

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.

Upvotes: 0

JohnC
JohnC

Reputation: 1387

You could use border-bottom instead

.link_my a:hover{

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

}

Thanks John

Upvotes: 4

Related Questions