Making DIV ignore mouseover events?

[csteinhilber]

I'm going to break the cardinal rule of forum posting, and not post any code here, because I think I can describe what I'm trying to do better than my current 240 lines of code would... but if anyone really wants to see code, I'm sure I could rustle some up.

I have what amounts to a series of list items. Using onmouseover for each list item, rolling over any one of the list items displays a small pop-up (much like a tooltip) positioned relative to the LI itself (the x is fixed, but the y moves as you roll over individual LIs). So the pop-up would be positioned like so if you rolled over list item #7.

 |1=list=item===================| 
 |2=list=item===================| 
 |3=list=ite------------------==| 
 |4=list=ite|   pop-up        |=| 
 |5=list=ite| (moves up/down) |=| 
 |6=list=ite------------------==| 
 |7=list=item===================| 
 |8=list=item===================|

But when the pop-up is visible, I want it, itself, to be transparent to any mouse events, instead bubbling the event to the list items "underneath", so that you can still roll-over list items #4, 5 & 6, which happen to be "covered" by the pop-up in this example.

One of the problems is, it's not truly bubbling, since DOM-wise, the pop-up and the list items don't really have any relationship to one another. The list is inline in the content, and the pop-up is at the bottom of the document.

Is there a (cross-browser) way to make the pop-up DIV ignore mouseover/mouseout events (as if it wasn't actually there)?

Any ideas would be greatly appreciated.
Thanks in advance,
-Carl

 

[BillyRayPreachersSon]

I've done something similar before, but it was easier for me, because my 'underneath' items were images, and so had a fixed width & height.

So, I calcluated, based on the mouse X & Y (onmousemove on the document) what items the cursor was over.

You could probably do something similar, but you'd need to calculate the positions of every element on-the-fly (e.g. to take into account different font sizes, etc). You might find a JS framework such as Prototype useful for this.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/