Different Link Classes
- Thread starter Zenax
- Start date
The_Magistrate
New Member
- Messages
- 1,118
- Reaction score
- 0
- Points
- 0
Easiest way to do this is using CSS. Anchors have pseudo classes called hover which allow you to specify what the link looks like when you pass your mouse over it. For example:
The above code should work in all modern CSS supporting browsers (IE, Firefox, Safari, Opera...)
EDIT: You can also specify individual default (non-hover) colors by omitting the ":hover" from the CSS like this:
Notice that styles cascade (hence, Cascading Style Sheets), so if you put the specific "a#link1" style after the global "a" style, the specific one will override the global for just that instance.
Code:
<head>
<style>
a { /* Specify what we want the default color of *all* our anchors (links) to be */
color : black;
}
a#link1:hover { /* Specify what we want the anchor with the id=link1 to look like when we hover over it. */
color : red;
}
a#link2:hover { /* Specify what we want the anchor with the id=link2 to look like when we hover over it. */
color : blue;
}
</style>
</head>
<body>
<a href="#" id="link1">My Link #1</a><br/>
<a href="#" id="link2">My Link #2</a>
</body>The above code should work in all modern CSS supporting browsers (IE, Firefox, Safari, Opera...)
EDIT: You can also specify individual default (non-hover) colors by omitting the ":hover" from the CSS like this:
Code:
a#link1 { /* We'll set the default color to the anchor with id=link1 to be an ugly lime color. */
color : lime;
}Notice that styles cascade (hence, Cascading Style Sheets), so if you put the specific "a#link1" style after the global "a" style, the specific one will override the global for just that instance.
Last edited: