I have a div with a child div inside it. I\'m using jQuery to show / hide the child div whenever a mouse hovers over the parent div (parent div spans the entire bottom of th
I found the best way to float a mouse event tracking div over an area is to make the div 1px width and what ever height you need. Then give the div a transparent border-right of the actual width you need. The reason this works better than a transparent image is because if you use an image you then cannot track mousemove events, for example to drag, without the div losing focus (you instead will drag the image). I had this issue when both a jQuery UI slider or a mouse drag were used to scrub an animation. Here is a simple version of how my code looked.
//container div to hold the animation images this part doesn't really matter to answer the question
// a bunch of images stacked like one of those animation flip books you made when you were a kid
// and so on
//
// now the div that tracks the mouse events this is what I am describing to answer the question
// it could certainly be used above nav items and would have less load time than an image