text hyperlink

@AliciaNov 18.2004

Hi guys,

I seen some web site where their text hyperlinks are not underlined.. it will underlined the text only when we roll over the text..

how did they do that ? i have checked their source code and they are not using any javascript to get that done.. is it css or what ?

can you guys give me an idea how to do that or let me know where could i get the reference to get this done ?

thanks.

to post a comment

HTML

@CharlesNov 18.2004 — #See http://www.w3.org/TR/REC-CSS2/selector.html#q15 but read down a few paragraphs.

@NogDogNov 18.2004 — #Also, think carefully before doing this. Web users expect links to be underlined, so if you deviate from this standard you risk making the user experience more confusing. (However, if this effect is for something like a navigation menu where it is pretty clear that each item is something to be clicked on, you can probably "get away with it" without any real confusion.)

@Robert_WellockNov 18.2004 — #If you are still having problems with the literature you can always try http://www.xhtmlcoder.com/css-coder.htm although obviously it's a very crude and old program.

@The_Little_GuyNov 20.2004 — #Bold Links

<i>
 </i>&lt;head&gt;
 &lt;style type="text/css"&gt;
 A:link {color: #3399FF; font-weight: bold; text-decoration: none;}
 A:visited {color: #666666; font-weight: bold; text-decoration: none;}
 A:hover {color: #9999FF; font-weight: bold; text-decoration: none;}
 A:active {color: #666666; font-weight: bold; text-decoration: none;}
 &lt;/style&gt;
 &lt;/head&gt;

Italic Links

<i>
 </i>&lt;head&gt;
 &lt;style type="text/css"&gt;
 A:link {color: #3399FF; text-decoration: italic;}
 A:visited {color: #666666; text-decoration: italic;}
 A:hover {color: #9999FF; text-decoration: italic;}
 A:active {color: #666666; text-decoration: italic;}
 &lt;/style&gt;
 &lt;/head&gt;

Normal Non-Underlined Links

<i>
 </i>&lt;head&gt;
 &lt;style type="text/css"&gt;
 A:link {color: #3399FF; text-decoration: none;}
 A:visited {color: #666666; text-decoration: none;}
 A:hover {color: #9999FF; text-decoration: none;}
 A:active {color: #666666; text-decoration: none;}
 &lt;/style&gt;
 &lt;/head&gt;

For rollover underline

<i>
 </i>&lt;head&gt;
 &lt;style type="text/css"&gt;
 A:link {color: #3399FF; text-decoration: none;}
 A:visited {color: #666666; text-decoration: none;}
 A:hover {color: #9999FF; text-decoration: underline;}
 A:active {color: #666666; text-decoration: none;}
 &lt;/style&gt;
 &lt;/head&gt;

text hyperlink

4 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

text hyperlink

4 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #HTML _↴