CSS hover links

[justinw]

I have often seen sites that have different hover effect for links: some have underline and other links in the site have underline and overline.

How is it that there can be more than one hover effect and how can I go about doing it?

Thanks!

[mikmik]

Might be with border-top using a:hover, along with text-decoration:underline.
Can you show an example?

[justinw]

OK...... on Webproworld:

The forum links at the top of each page have a hover underline; and the link hover for the newsletter has no underlines

[mikmik]

Didn't have far to go!

They probably used two sperate classes as 'selectors' something like this:

.newslinks a:link, a:visited {text-decoration:underline;}

.newslinks a:hover, a:active{text-decoration:none;}

then for each link - ( I will have to use some '*' symbols to stop the examples from turning into real links!)
<*a class="newslinks" href="**">Page One</*a>


Good reference site, this link to relevent page, use links at top to find 'index'
http://www.blooberry.com/indexdot/cs.../selectors.htm

[splinter]

You need to give the links classes (and if you want, ID's). On one of my sites I have declared this as the defualt style for my links:

a:Link, a:Active, a:Visited { 
text-decoration: none;
}

a:Hover { 
text-decoration: none;
background-color: #999999;
color: #FFFFFF;
border: 1px #666666 solid;
padding: 0px;
height: auto; 
}

a { 
font-family: Arial, Helvetica, sans-serif; 
font-size: 12px; 
font-style: normal; 
font-weight: bold;
color: #6699CC;
padding: 1px;
}

I don't want this for all the links though. This is the code for some other links:

#leftcol .fnav a {
background-color: #FFFFFF;
text-align: center;
font-size: 11px;
font-weight: bold;
}

#leftcol .fnav a:Hover { 
color: #6699CC;
text-decoration: underline;
border: 0px;
}

#leftcol is the ID name I use for that area of the page (called by <div id="leftcol">) and .fnav is the class (I use other styles of links within the leftcol ID). The a means those styles apply to all the anchor tags and a:hover is what happens when the links are hovered over.

I hope you understood that. If not, I'm sure I'll be able to explain what you don't understand (or someone else could answer of course :P).

[justinw]

so i can put different hover colors for different things?

If it has a:link can I specify the color of that specific link color?

[splinter]

Use this:

.link1 {
color: #[colour];
}
.link2 (
color: #[colour];
}
etc. etc.

and then the HTML code:

Hit me
Hit me as well

[justinw]

is it possible for me to make each link with its link color and hover color in each piece? eg:

.link1 {
color: #[colour];
a:hover:#[hover colour]
}
.link2 (
color: #[colour];
a:hover: #[hover colour]
}

[splinter]

You'll need to do this:

.link1 {
color: #[colour];
}
.link1:hover {
color: #[colour];
}
etc. etc.

And you use the same HTML.

[justinw]

Yeah... the second one works correctly! Thanks a lot!