HTML: How to Roll Over Text to Change the Link Color
No Web page is complete without hyperlinks. With HTML and CSS, you can set the colors for each type of link on a page: visited, unvisited, hover and active. The hover color is the color a link assumes when the mouse cursor is placed over it. Hover colors are not just decorative. Because the link changes color when you pass over it, it helps the reader navigate the page and follow the links he likes quickly.
Other People Are Reading
Instructions
-
Craete Link Colors
-
1
Open a text editor. You can use a basic editor such as Notepad. Save the file as "style.css" on your computer in the same folder as your website files.
-
2
Make CSS declarations for the hyperlink colors using the "anchor" pseudo-classes as follows. Use either color names (as shown below), hex values or RGB values. Note that the order of declarations is required to make them work.
a:link {color:red;}
a:visited {color:blue;}
a:hover {color:green;}
a:active {color:white;}
-
-
3
Add comments if it helps you remember which pseudo-class applies to which type of hyperlink in the Web page.
a:link {color:red;} /* This is the regular hyperlink. */
a:visited {color:blue;} /* This is for a visited hyperlink. */
a:hover {color:green;} /* This is to change the color of a link when you roll your mouse over it */
a:active {color:white;} /* This is the color of the link when it is clicked. */
-
4
Save the style sheet. Open the Web page and link it to the style sheet. Insert the following code between the HEAD tags, <head> and </head>.
<link rel="stylesheet" type="text/css" href="style.css" />
Use Link Colors
-
5
Launch a Web browser such as Firefox. Make sure you set the browser to allow Web pages to display their own colors rather than your own browser or system colors. In Firefox, for example, go to "Tools," "Options," "Content" and then "Colors." Check the box that says "Allow pages to choose their own colors."
-
6
Browse to the Web page you want to view. Look for a hyperlink on the page.
-
7
Drag the mouse over a hyperlink. When the cursor changes and it is hovering over the link, the color of the link should change to the color you set in the style sheet. If you do not see a color change, there could be an error in the code or your browser is set to ignore Web page colors.
-
1
References
Resources
- Photo Credit Internet hyperlink image by Star from Fotolia.com
