HOVERING
This script only works with IE and Netscape 6 or higher. However your link colors you define
will work. The only thing that will not work is the hover effect.
The following code will add some life to your webpages by using hover class
for your links.
By using CSS you can add some cool effects to your website. For example: move your pointer over the link
Developing Webs. That was kewl!! I will explain a little
about how to do this and even give you the code so you can go try it out for your self.
First thing is to remember is that you define your CSS between the
That way your browser knows how to handle your code.
Next you must tell the browser that it is going to be handling Style Sheet code. This
is done by putting
Now the hides the code from browser that do not use CSS.
In between the is where you define your classes. Such as
A:visited {color:#FFBFOO; text-decoration: none}
Now lets take a close look at this code
A:visited
is your anchor just like in creating a link for html.
MY LINK
A:visited
The :visited is your class. Just like when you define your link colors in your
body of your html code. .
:visited, :link and :active are the classes that define your visited, active, link colors and text-decoration properties.
A:visited {color: #FFBF00; text-decoration: none}
color: sets the color of the link text and text-decoration: sets how you want the text to look. for example you can set your text
color by either putting the hex number (color: #3300CC) or by typing the word of the color (color: blue). You can set your to text-decoration: underline or : overline or : line-through or even : blink.
This can be used for all your visited, link, active or even hover classes.
A:hover {cursor: crosshair; color: #C0FFC0; background-color: lightslategray; text-decoration: none}
This is the little gem that does the neat stuff. By adding this to your code
you will be able to change how your links work real time. What I mean by that is when
a visitor comes to your site and hovers a mouse over a link it will call the hover class.
This will give your visitors some interaction with your site. For example: if you use
this A:hover {cursor: crosshair; color: #C0FFC0; background-color: lightslategray; text-decoration: none}
your links on mouse hover would do this Developing Webs.
Note how the cursor changed to crosshair and the text color changed to aqua and the background color of the
text changed to slate. You may have saw the cursor: crosshair...that define the mouse pointer to change to cursor.
there is several cursor you can use (cursor: crosshair, default, help, move, pointer or text). You also may have
notice I added background-color: lightslategray...this changes the background color of the link text. You can use hex code
or type the name of the color here.
This is what your code looks like when you put it together.
Also one more thing if you use this for your website do not define your link colors in your tag
Please feel free to copy and paste this code below and play around with it.
|