/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] link effects for only one link

Copy linkTweet thisAlerts:
Apr 08.2006

i’m not sure what section this is under because i’m sure there are lots of ways to do this. i want color and underlining flips on mouseover with only a few links, and here’s the code i use to do it:

<STYLE TYPE=”text/css”>
a:link { color: none; text-decoration: underlined }
a:active { color: none; text-decoration: underlined }
a:visited { color: none; text-decoration: underlined }
a:hover { color: none; text-decoration: none }
</STYLE>

for some reason, this code affects every link on my page instead of just the few i want. this happens no matter where i place the code. if possible, i would change the colors from ‘none’ but i don’t want it happening to everything else. how do i do it? thanks!

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangApr 08.2006 — Give the ones that a to be changed a [I]class[/I]

[I]color:none;[/I] is not valid, so is ignored.

[I]text-decoration: underlined;[/I] is the default, so need not be added.

The order of the pseudo classes is important ([COLOR=red]l[/COLOR]o[COLOR=red]v[/COLOR]e [COLOR=red]h[/COLOR][COLOR=red]a[/COLOR]te)
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;css anchor&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;

&lt;style type="text/css"&gt;
a:link {}
a:visited {}
a.styled:hover {color:red; text-decoration: none }
a:active {}
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;a href="http://www.google.com"&gt;xxxx&lt;/a&gt;
&lt;a class="styled" href="http://www.google.com"&gt;xxxx&lt;/a&gt;
&lt;/body&gt;
&lt;/html&gt;http://www.w3schools.com/css/css_pseudo_classes.asp
Copy linkTweet thisAlerts:
@ElghinnApr 10.2006 — Im having the same problem. But I'm somewhat new at this and dont know much about css or anything, though I have used them before. Im the lead admin of a little forum and I used to know someone who knew how to make the admin names different colors. That person never told me how they did it, and now I'm trying to figure it out. My main guess is that it has to do with links because the names are links. Is there anyone who knows how to do this?
Copy linkTweet thisAlerts:
@__sticky__Apr 11.2006 — i had this problem for a while also...until I discovered "class"

for your regular links do:

<style type="text/css">

a {


color: #4A9485;

font-weight: bold;

text-decoration: none;

}

a:hover {

color: #000000;

font-weight: bold;

text-decoration: underline;}



...and then for the ones you want different give them a [b]"class"[/b] like this:



a.[b]nav[/b] {

display: block;

padding-left: 3px;

padding-top: 3px;

margin-left:-5px; margin-right:-5px; margin-top:0px; margin-bottom:0px;

background-color: #CBFFBD;

border-bottom: 2px solid #ffffff;

border-right: 0px solid #ffffff;

color: #000000;

line-height: 13px;

font-weight: bold;}

a.[b]nav:hover[/b] {

display: block;

padding-left: 3px;

margin-left:-5px; margin-right:-5px; margin-top:0px; margin-bottom:0px;

background-color: #DF8E00;

border-bottom: 2px solid #ffffff;

border-right: 0px solid #000000;

color: #ffffff;

line-height: 13px;

font-weight: bold;}

</style>

so when you want your special links to be displayed, type in this code:

<a href="blah" [b]class="nav"[/b]>blah</a> (dont forget to add class="nav")

and then your regular links, just type the regular code:

<a href="blah">blah</a>


....im new to explaining things, but I tried my best ?

also, you can name your class whatever you like...I just used "nav" because thats what I usedon my site...
Copy linkTweet thisAlerts:
@TusserteauthorApr 11.2006 — And if I wanted to have a few different classes, I could change all the parts that said 'nav' to whatever I wanted?
Copy linkTweet thisAlerts:
@ElghinnApr 11.2006 — its still not working for me...would someone mind taking a look at my thing and tell me what im doing wrong. you just have to register and and pm me on [URL=http://s15.invisionfree.com/Ultra_Anime_Crazy]Ultra Anime Crazy[/URL]
Copy linkTweet thisAlerts:
@JPnycApr 11.2006 — And if I wanted to have a few different classes, I could change all the parts that said 'nav' to whatever I wanted?[/QUOTE]
Correct, but don't forget to put class="someClassName" inside the anchor tag.
×

Success!

Help @Tusserte spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...