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
change link underline color...leave text the same
Moderator: General Moderators
- Chris Corbyn
- Breakbeat Nuttzer
- Posts: 13098
- Joined: Wed Mar 24, 2004 7:57 am
- Location: Melbourne, Australia
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
Or you could do this...
I like mine better. 
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>- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
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...
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>