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>