Home HTML and CSS Tutorials Hover Links in CSS (Part 2)

Hover Links in CSS (Part 2)

Author: GreyCobra.com More by this author

Added: May 08, 2006 Rating:

Level: Beginner Software: Dreamweaver

Hover Links in CSS (Part 2) Now that we know how to create hover links in CSS, lets learn how we can change more than just the color!

1. Here is what our document looks like so far:

<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>CSS Hover Links</title>
<style type="text/css" media="all">
a {
color: #007431;
}
a:hover {
color: #9A0319;
}
</style>
</head>
<body>
This is my Text. <a href="http://www.greycobra.com">This is a Link to GreyCobra.com</a>. Here is some more text.
</body>
</html>

2. As you can see, there are two states to our a tag. The first one is simply a, and the latter is the a:hover. We can specify how we want each to look inside of the { and }. Currently, we are only changing the color style. Lets insert the following code to make it so that our link is not underlined until it is hovered over:

<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>CSS Hover Links</title>
<style type="text/css" media="all">
a {
color: #007431;
text-decoration: none;
}
a:hover {
color: #9A0319;
text-decoration: underline;
}
</style>
</head>
<body>
This is my Text. <a href="http://www.greycobra.com">This is a Link to GreyCobra.com</a>. Here is some more text.
</body>
</html>

3. Save this and open it in an internet browser. As you can see, it is not underlined until it is scrolled over. We can also do the following:

<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>CSS Hover Links</title>
<style type="text/css" media="all">
a {
color: #007431;
text-decoration: none;
font-weight: bold;
font-family: arial;
font-size: 10px;
}
a:hover {
color: #9A0319;
text-decoration: overline underline;
}
</style>
</head>
<body>
This is my Text. <a href="http://www.greycobra.com">This is a Link to GreyCobra.com</a>. Here is some more text.
</body>
</html>

4. Save this and open it in an internet browser, and you will see that the styles are very customized now! Continue to play around with these effects until you find desired results!

Result

Good Luck!

Author's URL: GreyCobra.com