Page 1 of 1
change link underline color...leave text the same
Posted: Wed Nov 08, 2006 5:58 pm
by Burrito
I've seen some links that the underline changes color on mouse over, but the text color stays the same. how do I accomplish such a task?
I assume they need to be in a span that sets the style, then a hover of the anchor to change the color, but the span overrides the anchor so only the underline changes?
I tried this, but it didn't do what I was after....
thx,
Burr
Posted: Wed Nov 08, 2006 6:06 pm
by Chris Corbyn
border-bottom: 1px solid red;
Posted: Wed Nov 08, 2006 6:58 pm
by Burrito
ahh...so it's not a text-decoration at all then.
cool thx.
Posted: Wed Nov 08, 2006 7:37 pm
by RobertGonzalez
Just make sure your display is not block (not that you would, but others reading this might not know that). I used this technique (thanks to d11 a while ago) and it works beautifully as long as the element is not block level.
Posted: Fri Nov 10, 2006 11:01 am
by Luke
Or you could do this...
Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
a{
color: #FF0000;
text-decoration: underline;
}
a.no_underline{
text-decoration: none;
}
a:hover{
text-decoration: underline;
color: #000099;
}
.diff_color{
color: #FF0000;
}
</style>
</head>
<body>
<a href="#"><span class="diff_color">This is a link</span></a><br>
<a href="#" class="no_underline"><span class="diff_color">This is a link</span></a>
</body>
</html>
I like mine better.

Posted: Fri Nov 10, 2006 11:15 am
by RobertGonzalez
Reminds me of this tutorial -- >
http://www.tutorial-world.com/showtutor ... 29/sec/CSS
This is odd... this code works fine in FF and Opera, but does nothing at all in IE (6). Leave it up to IE...
Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
a {
color: #FF0000;
text-decoration: none;
border-bottom: solid 1px #ff0000;
}
a:hover {
border-bottom: solid 1px #000099;
}
</style>
</head>
<body>
<p>hello there <a href="#">This is a link</a> and this is not.</p>
</body>
</html>