How to Create Mouseover Link Color Changes
You can change the color of your links on the web when someone rolls over the link or clicks on it. A quick way to create a mouseover link color change is with Cascading Style Sheets. Cascading Style Sheets help you to create consistent pages throughout your website.
Instructions
-
Creating a Mouseover Link Color in a Separate CSS File
-
1
Open your favorite web editor and create a Cascading Style Sheet file for your code.
-
2
Add the following code to your CSS file:
a {
color: #0000FF;
text-decoration: underline;
}
a:hover {
color: #000000;
text-decoration: none;
}The above code changes a blue link with an underline to a black link without underline during a mouseover. Change the mouseover link colors (0000FF and 000000) to the colors you'd like to use.
-
-
3
Save your file as "style.css" or the filename you'd like to use. Be sure to leave the "css" file extension in your file name. Don't let your text editor add a ".txt" file extension.
-
4
Open the HTML document in which the code will be used and add the following code between your head tag:
<link rel="stylesheet" type="text/css" href="style.css" /> -
5
Save your HTML file and preview your work in a browser. Every page that includes the code: "<link rel="stylesheet" type="text/css" href="style.css" />" within the head tag will be affected.
Creating a Mouseover Link Color Inside the HTML File
-
6
Open your favorite web editor and the HTML document you're working on.
-
7
Add the following code between your head tag:
<style type="text/css">
a {
color: #0000FF;
text-decoration: underline;
}
a:hover {
color: #000000;
text-decoration: none;
}
</style>
</head>The above code changes a blue link with an underline to a black link without underline during a mouseover. Change the mouseover link colors (0000FF and 000000) to the colors you'd like to use.
-
8
Save your file and preview it in a web browser. Every link within your HTML document will be affected.
Create Mouseover Link Color Change for Specific Links
-
9
Follow the instructions for creating a mouseover link in a separate file or within the HTML document.
-
10
Replace the code in Step 2 with the following for your chosen option:
a.blue {
color: #0000FF;
text-decoration: none;
}
a.blue:hover {
color: #000000;
text-decoration: none;
}
</style>You may replace "a.blue" and "a.blue:hover" with the names that apply to your mouseover link colors.
-
11
Call the code into action by adding the following code within the body tag for the links you want changed:
<a href="http://somelinkhere.com" class="blue">some text link here</a>Again, you may replace "blue" with the class name you created for your link the previous step.
-
12
Save your HTML file and preview it in a web browser. Your mouseover links are now ready for the web.
-
1