the link underline [Archive] - Dynamic Drive Forums

d-machine

07-05-2008, 08:07 PM

hi,

I want to have a link without underline (of course this part is easy in css)
and onMouseOver I want the link to have an underline with a color that is different from the link color.

how can I do it?

thanks again

DimX

07-05-2008, 08:18 PM

You could either use a border:

a {
color: blue;
text-decoration: none;
}

a:hover {
border-bottom: 1px solid lime;
}

or a nested element to override the color of the link:

a {
color: lime;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

span.link {
color: blue;
}

<a href="#"><span class="link">Link</span></a>

jscheuer1

07-05-2008, 08:24 PM

You may need to get more elaborate, depending upon the other styles on your page, layout, etc. But here is a basic method:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
a {
text-decoration:none;
padding-bottom:1px;
color:green;
display:inline-block;
}
a:hover {
color:green;
padding-bottom:0;
border-bottom:1px solid red;
}
</style>
</head>
<body>
<a href="#">Test</a>
</body>
</html>

d-machine

07-05-2008, 08:32 PM

Thank you both :)
it was so quicky!

magicyte

07-08-2008, 01:35 AM

Agreed with DimX.

<style type="text/css"> a { text-decoration:none; } </style>

I create links a different and more fun way with JavaScript. Observe:

<script language="JavaScript">
function red(obj,url)
{
obj.style.color="red";
window.status = url;
}

function blue(obj)
{
obj.style.color="blue";
window.status = "";
}
</script>
<body>
<span style="color:blue;cursor:hand;" onmouseover="red(this,'http://www.w3schools.com/')" onmouseout="blue(this)" onclick="location.href='http://www.w3schools.com/';">W3Schools</span>
</body>

-magicyte