XHTML Element with onmouseover or onmousemove and CSS Pseudo Classes

XHTML Element with onmouseover or onmousemove and CSS Pseudo Classes

I was building an application, and the requirement was that a certain element needed to be displayed on hover. Unfortunately the element itself had a style that needed to be put on it, and also, the element to be displayed needed to have a show style, and be potentially repositioned.

I typically try to stay away from inline styles, preferring instead to switch classes like obj.className = 'someOtherClass.' Or, if I am removing the class, there are a few ways to do that. You could do obj.removeAttribute(“class”), or obj.className = null. The latter, however causes some problems in IE 6. I suppose the safest way to do it would be to set it like obj.setAttribute(“class”,””).

At any rate, when I captured the onmouseover, or onmousemove event, and tried to change the class based on the mouseout Firefox went into some sort of endless loop. I could only attribute it to the multiple hover pseudo-classes on the elements. Then it occurred to me that perhaps the class change was adjusting the size of the element so maybe the onmouseout event was firing even though I wasn't moving the mouse.

The result was I couldn't ever get the onmouseover and the onmouseout working so I ended up making it onclick. That worked, but it was interesting watching firebug go into caniption fits.