homepage Welcome to WebmasterWorld Guest from 54.211.231.221
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Rollover effect using CSS
Rollover effect CSS
flashmastermak




msg:1201022
 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

 

BlobFisk




msg:1201023
 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.

BlobFisk




msg:1201024
 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]

quiet_man




msg:1201025
 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.

tedster




msg:1201026
 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.

Nick_W




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

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

Nick

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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved