Is there any way to disable some DOM element from capturing mouse events?

Question

I have an element which is on top of another element. I want to capture the mouseover event with the bottom element, but when the mouse cursor is over the top element the bottom element is not receiving the mouseover events.

Is there any way to disable the top element from receiving mouse events?

Solution

Elements can be easily disabled from receiving mouse events using, in your example, the following CSS:

#region2 {
    pointer-events: none;
}

For more discussion, see this SO post.