I was checking out Toolband.com and noticed their links are way cool... when you mouse over them the text stays the same color gray, but the gray underline changes to red. 
I assume this is a combination of using a bottom border in CSS with some sort of Javascript code on the link but it didn't show up on the page source. I'm pretty good with CSS but very weak on my js.
Anybody know how to do this? Thanks.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example</title>
<style type="text/css">
<!--
a {display:block; float:left}
a:link, a:visited {border-bottom:solid 1px #aaa}
a:link:hover, a:active {border-bottom:solid 1px #f00}
-->
</style>
<div><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w3.org/TR/REC-CSS2/">CSS2 Specification</a></div>After going to toolband.com, you probably want something more like the code below:
IN CSS
.grey { color: #ccc; }
a:link {
/* insert styles for link here */
}
a:active {
/* insert styles for link here */
}
a:hover {
/* This is where you change the underline color for the link */
color: green;
}
a:visited {
/* insert styles for link here */
}
IN HTML
<a href=http://www.webdeveloper.com/forum/archive/index.php/""><span class="grey">Link text here</span></a>
I assume this is a combination of using a bottom border in CSS with some sort of Javascript code on the link but it didn't show up on the page source. I'm pretty good with CSS but very weak on my js.
Anybody know how to do this? Thanks.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example</title>
<style type="text/css">
<!--
a {display:block; float:left}
a:link, a:visited {border-bottom:solid 1px #aaa}
a:link:hover, a:active {border-bottom:solid 1px #f00}
-->
</style>
<div><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w3.org/TR/REC-CSS2/">CSS2 Specification</a></div>After going to toolband.com, you probably want something more like the code below:
IN CSS
.grey { color: #ccc; }
a:link {
/* insert styles for link here */
}
a:active {
/* insert styles for link here */
}
a:hover {
/* This is where you change the underline color for the link */
color: green;
}
a:visited {
/* insert styles for link here */
}
IN HTML
<a href=http://www.webdeveloper.com/forum/archive/index.php/""><span class="grey">Link text here</span></a>