jQuery - fire mouse event even when another element is on top

I have a jQuery mouseup event set on the ba开发者_JAVA百科ckground element that is blue with dotted lines (thats a background image, not elements). It only fires if one of the other elements is not laid on top. I could relay the event in code, but that seems to invite chaos. Is there a way to get the blue element to receive the mouseup event even if another element is resting on top?

Also, currently , the red, blue, and black overlay elements are not children of the blue background element, but they could be, if need be.

Edit:::::

Refactoring the html to nest the elements in to a parent-child relationship worked.

(By popular demand...)

I'd start by making the red, blue and black overlay elements children of the blue background.

Events propagate up through the DOM hierarchy, passing from child to parent until they hit the document - which means that they don't necessarily propagate up through elements as they're displayed on the screen. If you make the red, blue and black elements children of the blue background, any events on those children will be passed through to the background.