homepage Welcome to WebmasterWorld Guest from 54.237.213.31
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Rollover effect using CSS
Rollover effect CSS
flashmastermak

10+ Year Member



 
Msg#: 552 posted 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

WebmasterWorld Senior Member blobfisk us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 552 posted 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

WebmasterWorld Senior Member blobfisk us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 552 posted 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

10+ Year Member



 
Msg#: 552 posted 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

WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 552 posted 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

WebmasterWorld Senior Member nick_w us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 552 posted 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.
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