PDA

View Full Version : changing link colors with mouse hover

Moonlit
07-06-2003, 03:01 AM
Okay...I can't figure out how to get the link color to change when the mouse hovers over it.

I have this:
<style type="text/css">
A:hover { text-decoration: none; color:#7e4dff; }
</style>

And this:

<HTML>
<HEAD>
<TITLE></TITLE>
your css codes in here
</HEAD>
<BODY>
your html codes in here
</BODY>
</HTML>

How do I combine them and make it work?

Thank you.
christiandude03
07-06-2003, 03:02 AM
<HTML>
<HEAD>
<TITLE></TITLE>
<style type="text/css">
A:hover { text-decoration: none; color:#7e4dff; }
</style>
</HEAD>
<BODY>
<a href="somelink.html">somelink</a>
</BODY>
</HTML>
Moonlit
07-06-2003, 03:09 AM
Oh wow, thanks so much! It finally works.
christiandude03
07-06-2003, 03:10 AM
No problem...glad I could help you out!
Moonlit
07-06-2003, 03:26 AM
Say...is there any way I can just apply it to all the links on the page...without having to insert a new code for each link?
Dude128
07-06-2003, 03:36 AM
yes, just use the exact code posted. CSS affects all elements on the page, so your link CSS will be applied to all links on the page.
Moonlit
07-06-2003, 03:46 AM
Well, you see how the above code has that line that says "somelink" in it.... When I put the code in, the text "some link" shows up and ONLY that link changes color on mouseover...the rest of the links on the page stay how they are. When I removed underlines from my links...the CSS applied itself to all of the links on the page, but for some reason the hover CSS isn't.... Any ideas?

Thanks.
christiandude03
07-06-2003, 03:47 AM
The hover color is the color when you put your mouse over it. If you want it to change the regular color, when the mouse isn't over it:


<HTML>
<HEAD>
<TITLE></TITLE>
<style type="text/css">
A:link { text-decoration: none; color:#333333; }
A:hover { text-decoration: none; color:#7e4dff; }
</style>
</HEAD>
<BODY>
<a href="somelink.html">somelink</a>
</BODY>
</HTML>
Moonlit
07-06-2003, 04:41 AM
Yeah...I know how to get the regular link colors, and how to remove the underline and things like that....

What I'm trying to do is activate the hover for all links on the same page with one code.

Please click the link to my site and check out my link problem: the center link "somelink" does the hover...the rest do not.

I'm using...
<HTML>
<HEAD>
<TITLE></TITLE>
<style type="text/css">
A:link
{ text-decoration: none; color:#9c00a3; }
A:hover { text-decoration: none; color:#7e4dff; }
</style>
</HEAD>
<BODY>
<a href="somelink.html">somelink</a>
</BODY>
</HTML>

I understand that I can substitute "somelink" in the third to last line for my own link...but I don't want to have to do that for every link on my page.... Is there a code that applies the hover color to all the links on the page?
Dude128
07-06-2003, 04:55 AM
where are you even using that code? I don't see it on the site in your profile.

but on that page: your CSS is in the body of the page- CSS has to go in the head section to function properly.
Moonlit
07-06-2003, 05:05 AM
I don't think you can just go to my site and see what code I'm using and where I'm using it...because on geocities they give you helpers...so that you don't have to do everything in html yourself. So I have a basic page layout and I insert the code myself as an additional thing....

So I need to move the hover code up a few lines then? I'll try it.
Dude128
07-06-2003, 05:09 AM
but you can't expect everything to work with basic editors- including most things that have to be placed in the head section. for those things, you're better off using the advanced editor, because it has to go in the head section.
Moonlit
07-06-2003, 05:12 AM
Oh! I'm so sorry...my editor didn't save the changes. If you check back to my site you should see the link that has the hover working in the center. The link is "somelink"...I'm sorry.

The hover for that link works...that's not a problem. What I want is to be able to apply it to all my links on the page...like with one code. I use one CSS style sheet to get rid of the underlines on the links...I want to use one CSS to make the hover work, too.


Okay...well I can use Advanced Properties...which has sections entitled "Head Script"..."Body Tag Script"...and "Body Script"...does that help?
Dude128
07-06-2003, 05:16 AM
Originally posted by Moonlit
I want to use one CSS to make the hover work, too.

just put it in the head section. that's pretty much the only thing you can do to make it work consistently.
Moonlit
07-06-2003, 05:24 AM
Hmm... that doesn't work. The only thing that HAS worked is entering a line for each link I want to have the hover effect...

example:
<HTML>
<HEAD>
<style type="text/css">
A:link
{ text-decoration: none; color:#9c00a3; }
A:hover { text-decoration: none; color:#7e4dff; }
</style>
<TITLE></TITLE>
</HEAD>
<BODY>
<a href="MYPAGE.html">MYPAGE</a>
<a href="MYPAGE2.html">MYPAGE2</a>
<a href="MYPAGE22.html">MYPAGE22</a>
</BODY>
</HTML>

But this is a problem because if I have to do this to get the hover link to work...then I don't know how to rearrange the links on the page...because they show up all together in a little square. That's why I was trying to see if there was just one code that would apply the same hover effect to all links on the page...without having to manually put in all the lines of code above.
Dude128
07-06-2003, 05:31 AM
I don't really understand what you're saying...what line for each one?

having the CSS code on the page and in the head section should affect all existing links you have.
Moonlit
07-06-2003, 05:38 AM
Yes, exactly...it SHOULD affect all links on the page, but it's not.
What I mean by putting each line in is... that if I want the hover to actually work, I can put in a code line for each link I want to have the hover...

In the code below, do you see the lines at the bottom that include "MYPAGE"...then the next line, "MYPAGE2"...etc...those are the lines I have to put in to make hover work...a line for each link.

example:
<HTML>
<HEAD>
<style type="text/css">
A:link
{ text-decoration: none; color:#9c00a3; }
A:hover { text-decoration: none; color:#7e4dff; }
</style>
<TITLE></TITLE>
</HEAD>
<BODY>
<a href="MYPAGE.html">MYPAGE</a>
<a href="MYPAGE2.html">MYPAGE2</a>
<a href="MYPAGE22.html">MYPAGE22</a>
</BODY>
</HTML>

I don't know why I have to add in each link individually. I want it to apply to all links, but I don't know how to make it do that.

When I removed all the underlines from my links, all I put in was

<style type="text/css">
A:link {text-decoration:none; }
A:visited {text-decoration:none; }
</style>

I didn't even put in <Head> or <TITLE> or anything....and removing the underlines DID work. But hover does not work like that....
Dude128
07-06-2003, 05:44 AM
now I see the problem- you can't just stick a head section in the middle of the page. you can only have one head section, and the CSS needs to go there. you have two sets of <html>, <head>, etc. tags.
Moonlit
07-06-2003, 05:51 AM
Could you copy paste the above and rearrange it correctly...I don't think I know how.