The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

The catch is that as you roll your mouse down the list each list item in turn will change its background and text to match the already highlighted item. No catch there you say - that's just a normal list! The real catch is that the already highlighted item (link 1) must also switch off as you scroll down the list.

In a normal list the highlighted item usually stays highlighted while you scroll down so you in fact have 2 highlighted items. The original one and the one under the mouse. In this version there is only ever one highlighted item.

When no cursor is over the list the list displays as the image above. When the cursor is over link1 the text turns black but the background stays yellow.

When the cursor is over link2 then link 2 highlights with the yellow background colour and black text and link one reverts to black background and white text the same as all the other links.

This behaviour is consistent when you move up and down the links and each link should highlihght in turn. Moving the cursor off the list results in link one being highlighted as per the original state.

Hmmmm I think I've made it sound more complicated than it is

The only difference between this and a normal rollover list is that the original highlighted item (link 1 in this case) switches off as you traverse the list.Wherever the mouse cursor is in the list only that item is to be highlighted until you mouse out and then the original highlighted link shows up again.

The links must all be able to work correctly of course.Rules:

No frames or iframes

No javascript or scripting of any kind

NO TABLES

No images

No expressions or conditional comments

Use Valid CSS

Use Valid xhtml

No hacks, no child selectors, no universal selecors, no means of offering separate code to each browser. The same code must work for both browsers.

Must work in Firefox and ie6 exactly the same as my example above

There are no prizes other than the self satisfaction of being the first to complete this. If you solve it then post a message here but PM me the solution so that other people can still have a go.

Jamslam has given me the first correct entry and deserves to be congratulated at this test was quite hard.

I was expecting this to last all week

I won't give any answers or clues yet in case some others want to try their hand at this and I'd be interested to see if there are any different ways of doing this as jamslams code was very close to mine.

It's good to know that I had basically the same solution as you anyway! Almost .. I am using the z-index property instead of visibility: hidden as you have done. I was almost there but having problems with the z-index's for IE. Works fine for Firefox and Opera though.