A div is blocking mouse events

Question

I have some problems with mouse events in a rich html application.

I have a big fat 'semi-transparent' div covering the half of the screen (damn designers). Let's call him A.

Behind this A div, there is a big container called B.

Inside B, there are 4 divs that should respond to mouseover and mouseout events. We can call them C1, C2, C3 and C4.

Unfortunately, the big fat A div blocks all my Javascript/jQuery events.

This could be solvable with some workarounds, but here's the thing:

• This bug appears inside a homemade Javascript engine. I know B but I'm not supposed to know the C elements (or their ids) standing inside B. So I can't use neither coordinates trick nor if/else workarounds.
• The application should run on a TV (inside a weird version of opera). So no 'pointer-events' CSS trick.
• Please don't tell me to redesign my app :)

I tried to handle (with and without jQuery) the event from A and trigger it to B. It works but then B doesn't forward it to its C children, and once more, I don't know them by advance.

Answer 1

Here is what you do. Most browsers support css pointer events.

On those browsers use:

#big-blocking-div {
  pointer-events: none;
}

For browsers that don't support this css feature do this

#big-blocking-div {
  display : none;
}