Welcome to WebmasterWorld Guest from 54.226.32.234

Forum Moderators: not2easy

Message Too Old, No Replies

Rollover effect using CSS

Rollover effect CSS

     

flashmastermak

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

10+ Year Member



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

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

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



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

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

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



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

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

10+ Year Member



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

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

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



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

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

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



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

Nick

 

Featured Threads

Hot Threads This Week

Hot Threads This Month