Javascript Mouseover with Layered DOM Elements

JavaScript
1

Hi,

Let’s assume we have two divs:

======================
| DIV 1                             |
|  ==================   |
|  |           DIV 2            |  |
|  ==================   |
======================

DIV 2 is inside DIV 1.

DIV 1 has mouse events (i.e. onmouseover, onmousemove).

The problem is, when DIV 2 is over DIV 1, the mouse events don’t fire.

In my specific case, DIV 2 follows the mouse so it’s always right below the mouse and always above DIV 1.

How can I make the DIV 1 events fire?

Thanks.

2

As you don’t seem to be able to use the document object model (DOM) to determine the relationship of DIV2 compared with DIV1, you will need to instead compare the mouse xy position with that of DIV1.

There are some horrible cross-browser problems relating to the mouse position, but fortunately someone else has worked out how to properly obtain the mouse position for you.

He also takes you through how to find the position of an element, which you would use for getting the xy coords of DIV1.