Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

tech4all

macrumors 68040
Original poster
Jun 13, 2004
3,399
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 :)
 
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;
}
 
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?
 
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;
}
 
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!
 
Thanks all. I'll go ahead and play around with the code and see if I can learn this stuff....thanks!
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.