This weeks quiz is a little tough because I'm not giving any clues this time and I'm only providing an image example for you as the real thing would give the game away.

Your task is to produce the following rollover vertical list that would usually require javascript to accomplish:


Easy you may say - but wait where's the catch?

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.
  • No frames or iframes
  • No javascript or scripting of any kind
  • 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.

Some basic code to give you colours etc.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
 list-style-type: none;
 font-family: Arial, Helvetica, sans-serif;
ul#navlist a {
width: 100%;
background-color: #036;
color: #EEE;
text-decoration: none;
ul#navlist li.active a {background:#ffffcc;color:red;}
ul#navlist li a:hover {background: #ffffcc;color:black;}
<ul id="navlist">
  <li class="active"><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
  <li><a href="#">Link 5</a></li>
  <li><a href="#">Link 6</a></li>
You will probably need to make some changes to the html (unless you do it differently to me) and of course the css will need to be filled out.

Have fun and shout if you're not sure what I mean .


PS If this is too hard I will offer clues after a couple of days