Gamewzrd85,
You wrote: ** I was wondering if anyone knows how to make it so a link is not underlined until the mouse arrow is on it? And what about changing the link color when the mouse arrow is on it. And the style (eg. Bold, Italic). **
Here are some examples of what you can do:
Changing the color of the link
Back Home
This will make the link text appear in teal when the mouse hovers over it.
Changing the color and the background of the link
<.STYLE TYPE="text/css">
<.-- hide from old browsers
A { text-decoration: none }
A:hover { color: silver; background: navy}
-->
<./STYLE>
This will make the link text appear in silver on a navy background when the mouse hovers over it.
Changing color, background and style of the link
<.STYLE TYPE="text/css">
<.-- hide from old browsers
A { text-decoration: none }
A:hover { color: silver; background: navy;
font-weight: bold; font-size: 11pt }
-->
<./STYLE>
This will make the link text appear in bold and silver on a navy background, rendered in 11 point size, when the mouse hovers over it.
As you can see these examples apply a specific style to the anchor tag (A) and to a "sub definition" of this tag which is expressed as "A:hover". This is called a "pseudo-class" in style terms.
There are a few more "pseudo-classes" which come with the anchor tag which you can assign different styles to:
A:hover
defines the style of the link when the mouse "hovers" over the link
A:visited
defines the style for visited links
A:active
defines the style for active links
A:link
defines the normal style of the link
For more information on how to apply styles to your page please refer to the style specific URLs at http://www.w3.org and to the mastergrid overview at http://webreview.com/wr/pub/guides/style/mastergrid.html.
