I've built a page with four buttons, each it its own div tag. I've positioned each div tag with CSS3 so they line up horizontally as desired over another div tag containing an illustration.
Using jQuery, I've added event listeners for the mouseover and mouseout events. My event listeners work as expected to swap out graphics for the individual buttons.
The problem is that while the mouseover and mouseout events are generated as expected in the CSS positioned div tags, I am also getting the mouseover and mouseout events from what appear to be hidden areas lower on the page. Those extra event generating areas don't even seem to correspond to anything other than to say they are lower on the page than the visible buttons.
Does anyone know what is causing this and more importantly, is there something I can do to prevent this double event effect?
Well, I found the problem and fixed it. Seems in my code I was listening for the mouse events on the div tag rather than the button it contained. Soon as I changed to code to listen for events from the buttons, my problems went away.