Rollover text : underlined

[tech4all]

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 😀 Actually it is interesting.


Any help is appreciated, thanks 🙂

 

[Regular_John]

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 😀 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;
}

 

[tech4all]

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?

 

[Regular_John]

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;
}

 

[Benjamin]

oh nvm my post... dornoforpyros got it... before me 🙂

 

[Stampyhead]

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!

 

[tech4all]

Thanks all. I'll go ahead and play around with the code and see if I can learn this stuff....thanks!

 

[cleo]

You might check out W3 Schools' CSS tutorials... I use them for reference quite often. Very clear-cut language and good examples, as well as a great reference section.