The problem
Today at work I was given the task of using jQuery to create a very specific effect. I have an unordered list with three list items. When the user rolls over one of them, the item gets a class which sets the background to a new color, while any other item that has that class, has it removed. On top of that, if the container the list is in loses focus (meaning the cursor leaves the container), the last list item hovered on should retain the background changing class. On top of THAT, whenever one of those said list items is hovered over, one of three content divs below it should go from hidden to visible. Oh, and I have to have the second item started off as looking like the hover state. This one took me a while to figure out. I could get the normal rollover, but the keeping the class thing when the list item lost focus through me for a loop.
Click here to take a look at the final working jQuery. You’ll see what I was trying to do if you roll over and out and what not.
I’ve seen this site before, 