I have an iframe that I control the contents of. I am overlaying a set of ui controls on top of it. The overlay overs large portions of the iframe.
In order to scroll the iframe I have found the only solution to be to set pointer-events: none on my overlay. However this prevents pointer events lol.
I solved one problem (drag and drop) by setting pointer-events: all when dragging starts.
However, I still need css :hover to work on my overlay. I do not care if this is done via a js event or css :hover, but I want to highlight the overlay on hover, while still being able to scroll the iframe underneath. Is there anyway this is possible?
in the attached image. The blue-green box is on the overlay. the light gray boxes are on the iframe. I map the positions of the iframe gray boxes to the overlay blue-green boxes to show drop zones on the iframe. The top header and sidebar are on the host site, and the content in the main area with all the gray boxes is on the iframe.
I have postmessage setup to do two way communication. I have a script in place to get the position of certain elements in the iframe which i use to map the overlay.
But I can not figure out how to both do on hover of overlay and still allow scrolling of the iframe. Drag over only works because I set all the pointer-events to all when drag starts. But I can not do that for hover.
