Fotiman - 5:02 pm on May 10, 2012 (gmt 0)

I played around with it a bit. Here's what I think the problem is.

When you mouseover the content area, depending on the coordinates of the mouse, you set the hover (handlerIn and handlerOut) values for ALL of the ".cat" elements, vs. just the one you are currently hovering over. Suppose you hover over something in column 1... it calculates that the x coordinate is < 240, and attaches a hover handler to the ".cat" element in column 2 (as well as all other ".cat" elements, but lets focus on column 2 for now) which specifies a css "left" value of 0. Now, when you move the mouse over the ".cat" element in column 2, you have a race condition between the current hover handler for the item in column 2 (which, as mentioned, has a left value of 0 that is not correct for column 2), and the mouseover handler that attaches a new hover handler with the correct left setting for column 2.

That's as far as I've gotten with it so far, but hopefully that gives you some ideas.

[edited by: Fotiman at 5:45 pm (utc) on May 10, 2012]