homepage Welcome to WebmasterWorld Guest from 72.44.48.122
register, login, search, subscribe, help, library, PubCon, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library : Charter : Moderator: open

CSS Forum

    
A question about h tags and hyperlinking “on the fly”
How to create two different styles of hyperlink?
JackR




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




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

Here ya go - This should help you out.

<html>

<head>

<style type="text/css">

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




msg:3402694		 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;}


Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
WebmasterWorld ® and PubCon ® are a Registered Trademarks of Pubcon Inc.
© Pubcon Inc. 1996-2012 all rights reserved