I have an editor which is in my window that contains a wrapping iframe and then 2 more iframes inside like (the HTML inside the <iframe> element is inserted via write() in JS, not hardcoded like this):

<iframe class="parent">
  <div class="wrapper">
    <iframe class="editor"></iframe>
    <iframe class="previewer"></iframe>
  </div>
</iframe>

One is an editor, the other is a previewer. The first one that contains the two (we'll call this the parent) has an eventListener for mousemove attached to it, but nothing is firing. If i add a 5px border for example, the event will fire when I move my mouse on the border of the parent, but not when i hover over the middle which contains the editor or previewer (previewer is display:none while the editor is visible, and vice versa).

So, the blue area in the following i can mousemove, but the rest I can't. It's most likely because of the stacking order, but how can I attach an event to fire on the entire frame? I need mousemove because on mousemove I display a menu in the bottom right. I want the same menu to display whether or not the editor or the previewer is visible.