A question about h tags and hyperlinking “on the fly”

Forum Moderators: not2easy

Message Too Old, No Replies

A question about h tags and hyperlinking “on the fly”

How to create two different styles of hyperlink?

JackR

2:19 am on Jul 24, 2007 (gmt 0)

I’m completely stuck trying to figure out how to have two types of hyperlink in the same paragraph: one with text decoration/mouseover – the other without text decoration/mouseover.

What I’d like to be able to do is hyperlink any piece of text in the paragraph and choose which version of hyperlink I want – with or without decoration.

I'd like the font family/colour/size to stay the same regardless of the type of Hyperlink...

Please help if you can.

coho75

3:01 am on Jul 24, 2007 (gmt 0)

Here ya go - This should help you out.

<html>

<head>

a { text-decoration:none; }
a.hoverDec:hover { text-decoration:underline; }
a.noHoverDec:hover { text-decoration:none; }

</style>

<body>

<p>This is some text in a paragraph. <a href="" class="hoverDec">I'm and undelined link</a> and <a href="" class="noHoverDec">I'm not</a>.</p>

</body>

</html>

JackR

3:11 am on Jul 24, 2007 (gmt 0)

Thanks coho75!

I had figured it out, but your version is a LOT cleaner than mine:

.declink a:link, a:visited, a:active {
color: #DAEAF2;
font-size: 11px;
font-weight: bold;
text-decoration: none;}
.declink a:hover {
color: #DAEAF2;
font-size: 11px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #FF0000;}
.nodeclink a:link, a:visited, a:active {
color: #DAEAF2;
font-size: 11px;
font-weight: normal;
text-decoration: none;}
.nodeclink a:hover {
color: ##DAEAF2;
font-size: 11px;
font-weight: normal;
text-decoration: none;}