These are the examples referred to in the article on Links Hover and Rollover Effects.
Example 1:
a:link { color: #0066CC; } a:visited { color: #cc0000; } a:hover { color: #2D8930; } |
|---|
This link changes to red color when visited and green when mouseover.
Example 2:
a:link { color: #0066CC; } a:visited { color: #cc0000; } a:hover { color: #2D8930; font-size: 120%; } |
|---|
In addition to the green, this link is also bigger in font when you hover your mouse over it.
Example 3:
a:link { color: #0066CC; } a:visited { color: #cc0000; } a:hover { color: #2D8930; background: #ffff66; } |
|---|
You can now see a yellow background when you place your cursor over it.
Example 4:
a:link { color: #0066CC; } a:visited { color: #cc0000; } a:hover { color: #2D8930; font-family: monospace; } |
|---|
Do you see a different typeface or font when you place your mouse over this link?
Example 5:
a:link { color: #0066CC; text-decoration: none; } a:visited { color: #cc0000; text-decoration: underline; } a:hover { color: #2D8930; text-decoration: blink; } |
|---|
Notice that the link blinks when you mouseover and it has an underline when you have visited the link. This works in Firefox but not in IE.
Example 6:
a:link { color: #0066CC; } a:visited { color: #cc0000; } a:hover { color: #2D8930; border-style: inset; border-color: #D462FF; } |
|---|
Inset Border
Notice the violet border around the above link when you hover over it.
Example 7:
a:link { color: #0066CC; } a:visited { color: #cc0000; } a:hover { color: #2D8930; font-family: monospace; font-weight: bold; font-size: 120%; background: #ffff66; text-decoration: blink; } |
|---|
This hover link has a combination of styles - a different font family, bold and bigger font, highlighted background, and it blinks when you hover the mouse over it.
For details on where the code can be inserted in the template to change the effects of links in the sidebar and Post title, please refer to the article on Links Hover and Rollover Effects.
© Tricks for New Bloggers
2 comments:
Erm, i saw some links in my frnds blogs when rollovered, the bottom bar of the internet explorer has some other text, instead of the website that you'll be directed to.
For example, i scroll my mouse over to a link named 'VALERIE'.
then the bottom bar of the IE shows something like 'CLASSMATE! :D'
instead of the website of the link.
Can you help me on this?
Great article on changing the hover effect on links. Very clear and you even posted some excellent examples. May I make only one recommendation when it comes to colors. Simplicity is the key when it comes to tutorials for beginners, so perhaps get away from using hexadecimal colors at first and use plain English colors (e.g, 'red' instead of '#ff0000', etc). Just a thought. Thanks for the great site!
I have something to say ...