Onmouseover Causing Blinking

I'm using onmouseover, the z-index property, and a set of CSS classes to display text hidden behind an image. However, my images blink rapidly when hovered over. Can anybody help

Solution 1:

Hiding an element that has the mouse pointer over it causes onmouseout to fire, displaying the element again, which hides the element, etc etc. You should probably attach your "re-show the div" event to something else, like a click for example.

Better example: When you image div is hidden by mousing over, does another element take its place? You mention a hidden text element behind it. Try attaching the "Re-show div" handler to the onmouseout of the text div, while leaving the "hide div" handler where it is (attached to the onmouseover of the image div).

Solution 2:

Try using CSS sprites as most of the time a hover image flicker is caused by the time it takes for the browser to load the image when called by the hover. A sprite will load all of the images at once and eliminate the flicker. Css sprites