CODEWITHSUNDEEP
jqueryhtmlcssmouseoverunderline
Amin
Amin

Reputation: 434

How to remove underline from text hyperlink?

I got a problem in my css file, I used this following code:

text-decoration: none;

But still it doesnt have effect on text, for some reason I had to use java script for href link behind text. But I think so because of this issue text decoration doesn't has effect on the text. even I can't use different color on text like hover and mouse over color.

Here is code:

 $(function() 
{
$('.maincaptionsmall').wrapInner('<a href="http://google.com"></a>');
});

and here is html code:

<span class="maincaptionsmall">Home</span>

For your information I used text decoration none even inline of href code, but it doesn't has effect.

I'm gonna remove underline from Home text and use different color for mouse over something like this:

:hover { color: yellow; }

Thanks in advance.

Upvotes: 0

Views: 1740

Answers (4)

Michael Mitch
Michael Mitch

Reputation: 839

CSS for <A> tag

a {text-decoration: none;}
a:hover {color: yellow;}

CSS for <SPAN> tag

.maincaptionsmall a {text-decoration: none;}
.maincaptionsmall a:hover {color: yellow;}

I see it works well on IE9+ and Chrome 14+. Hopes that help :)

Upvotes: 1

Satinder singh
Satinder singh

Reputation: 10198

If its coz due to JSfunction, then you can try using inline css within ur JS

$(function() 
{
$('.maincaptionsmall').wrapInner('<a style="text-decoration:none;" href="http://google.com"></a>');
});

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

Try the rule

.maincaptionsmall a {
    text-decoration: none;
}

Upvotes: 0

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57105

Use this

.maincaptionsmall a {text-decoration:none;}
.maincaptionsmall a:hover {color: yellow;}

Upvotes: 0

Related Questions