mouseenter event on background svg elements

Question

Is there a way of triggering mouseenter events on SVG elements that are behind other elements? It seems like the top element is catching the event and it is not bubbling up the DOM.

Alternatively, is there a good way of checking if the mouse is over a specific SVG element?

To clarify, I am trying to implement a 'drag & drop'-like functionality where i change the front element depending on the back one. Note that the elements are not nested.

Answer 1

I just found the answer. The trick is to set pointer-events: none for the element when you start the drag (on mousedown) and then back to pointer-events: all when you finish dragging. That way the element doesn't capture any of the events, and lets them pass through to whatever is in the background.