homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Rollover effect using CSS
Rollover effect CSS

 2:37 pm on Jan 20, 2003 (gmt 0)

Iíve visited a few sites where html text links have a rollover effect (they change color) this effect seems to be controlled by an external stylesheet. Does anyone know how to code this?

Thanks Mak



 3:18 pm on Jan 20, 2003 (gmt 0)

Hi Flashmastermak,

Is this what you are looking for?

a:link { color: #009;}

a:visited { color: #909; }

a:hover { color: #900; }

a:active { color: #900; }

This will change the colour of the link text depending on the state (normal, visited, hover, active). The order of pseudoclass calls is very important.


 3:42 pm on Jan 20, 2003 (gmt 0)

Hey quiet_man,

In the List Apart link you posted above the example towards the end of the page (the blue menu system) jumps to the left when I hover over it for the first time in IE6. It doesn't happen in Mozilla though!

I haven't gone through the CSS in detail to see if I can spot why, but I always thought that using lists to create this effect was quite complex, in comparison to setting a background colour to the link.

This is definitely a discussion for the CSS Forum now though!

[edited by: BlobFisk at 4:11 pm (utc) on Jan. 20, 2003]


 3:59 pm on Jan 20, 2003 (gmt 0)

BlobFisk - you're right, it does jump to the left. I never noticed before as I usually use Mac 9.1/IE5 (works fine there).

But I have adapted that List Apart code for a couple of sites now with no such problems in IE6 or any other browser (apart from NN4, of course).

I wonder if its just because of the positioning on the page of the example on A List Apart? Not having noticed the problem in the first place, I didn't do anything to correct it in my implementation.


 4:05 pm on Jan 20, 2003 (gmt 0)

This is definitely a discussion for the CSS Forum now though!

You're right -- this thread is now moved to its new home.


 4:13 pm on Jan 20, 2003 (gmt 0)

CSS Rollover Discussion [webmasterworld.com] from a little while back..


Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved