the link underline

**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:

Code:

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

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

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

Code:

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

a:hover {
    text-decoration: underline;
}

span.link {
    color: blue;
}

HTML Code:

<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:

Code:

<!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.

Code:

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

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

Code:

<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

Thread: the link underline

Thread Tools

Search Thread

the link underline

The Following User Says Thank You to DimX For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions