Rollover text : underlined

tech4all

macrumors 68040
Original poster
Jun 13, 2004
3,400
489
NorCal
How do you get it to where you mouse over text on a website it gets underlined or changes color? Kinda like how at the top of the main forum page they have the effect on "User CP", "FAQ" , "Members List", "Calendar", etc.....

I'm trying to learn CSS right now with Dreamweaver and am trying to learn how the code works and such.....fun fun fun :D Actually it is interesting.


Any help is appreciated, thanks :)
 

dornoforpyros

macrumors 68040
Oct 19, 2004
3,070
3
Calgary, AB
tech4all said:
How do you get it to where you mouse over text on a website it gets underlined or changes color? Kinda like how at the top of the main forum page they have the effect on "User CP", "FAQ" , "Members List", "Calendar", etc.....

I'm trying to learn CSS right now with Dreamweaver and am trying to learn how the code works and such.....fun fun fun :D Actually it is interesting.


Any help is appreciated, thanks :)

a {
color: #666666;
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
 
Comment

tech4all

macrumors 68040
Original poster
Jun 13, 2004
3,400
489
NorCal
dornoforpyros said:
a {
color: #666666;
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
Awesome thanks!

Now how do you do a similar thing, only the text changes color?
 
Comment

dornoforpyros

macrumors 68040
Oct 19, 2004
3,070
3
Calgary, AB
ugg ok sorry, I though you'd figure it out just from looking


This set's your default link colour/style
a {
color: #666666;
text-decoration: none;
}



This set's the visited state(after the user has clicked the link once
a:visited {
text-decoration: none;
}

this is your over state
a:hover {
text-decoration: underline;
}


So if you want to change your over state to black

a:hover{
color:#000000;
}
 
Comment

Stampyhead

macrumors 68020
Sep 3, 2004
2,294
30
London, UK
tech4all said:
Now how do you do a similar thing, only the text changes color?
a {
color: #666666;
text-decoration: none;
}
a:visited {
color: #333333;
text-decoration: none;
}
a:hover {
color: #999999;
text-decoration: underline;
}
Another note: setting a style for the "a" tag as was done here will make all of your links have that style. If you want to be able to set one style for some links and another style for others, create sub-classes for your links:
a.redlink {
color: #CCFFFF;
text-decoration: none;
}
a.redlink:hover {
color: #CCFFFF;
text-decoration: underline;
}
a.bluelink {
color: #003333;
text-decoration: none;
}
a.bluelink:hover {
color: #003333;
text-decoration: underline;
}
The only difference with doing it this way is that you have to manually apply the style to the link rather than it happening automatically, but this way you have the flexibility of having more than one style applied to your links. Just create a new style for each one.
Hope all of this helps!
 
Comment

tech4all

macrumors 68040
Original poster
Jun 13, 2004
3,400
489
NorCal
Thanks all. I'll go ahead and play around with the code and see if I can learn this stuff....thanks!
 
Comment
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.