How can I pause a jQuery on mouse hover iFrame obj

问题:

I have a jQuery that on mouse move it fade in/fade out a div object, however it doesn't work correctly when on view there is an iframe.

This is my jQuery:

var timer, myDiv = $('#mydiv');
$(document).on('mousemove', function(ev) {
    var _self = $(ev.target);

    clearTimeout(timer);

    if (_self.attr('id') === 'mydiv' || _self.parents('#mydiv').length) {
        return;
    }    

    if(!myDiv.hasClass('show')) {
       myDiv.fadeIn();
    }          

    timer = setTimeout(function() { 
        myDiv.fadeOut(1000, function() {
            myDiv.removeClass('show');
        });
    }, 1960);    
});

Why this jQuery doesn't work when the mouse pointer is hover an iframe object?

Here the DEMO

You can see on top of the demo page the proper functioning of the jQuery, it display the red square on mouse movement and hide it after n seconds of inactivity.

Instead if you try to do the same but on the iframe, the red square become hidden and nothing else.

UPDATE

Thanks to A. Wolff that shown me this I know that the solution is more complex than thought.

If the documents are not on the same document.domain it becomes quite a bit mroe complex, and you will need the iframes page to run javascript itself that sets the mousemove event listener. and then you can do cross frame communication as described here: http://softwareas.com/cross-domain-communication-with-iframes

The iFrame is referred to my subdomain page, so I can edit in any way needed.

How could I proceed?