Hiding the user's cursor over iframe. Possible?

Question

I want the user's cursor to be hidden over an iframe.

iframe {
  cursor: none;
}

However it doesn't do the trick.

Do I need to use JavaScript? Can JavaScript even do it? What's the solution?

Answer 1

Unfortunately, I had to resort to js for this one.

var iframe = document.querySelector('iframe');
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
iframeDoc.body.style.cursor = 'none';

This won't work cross-domain, but I don't think you should be using something like that cross domain anyway.

Assuming this is all on your own domain, another good js solution would be to inject a stylesheet into the iframe, changing it's own css to cursor: none on the html or body. I have used a similar strategy for my content manager - I load the real page right into the admin panel, inject some elements and a stylesheet into it, and then have admin features available right on the site - loaded in the iframe.

Answer 2

You could also do it without JavaScript.
Example: http://jsfiddle.net/dyV7L/

.wrapper {
    position: relative;
}

.hide-cursor {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    cursor: none;
    z-index: 100;
}

<div class="wrapper">
  <iframe src="http://doc.jsfiddle.net/"></iframe>
  <div class="hide-cursor"></div>
</div>

Answer 3

I think the only solution without srcipts: create a div, set position: absolute to the div and Iframe, and set the div over the ifram with z-index. Example:

iframe{
    width: 600px;
    height: 600px;
    display:block;
    z-index: 0;
    margin-left: 0px;
    margin-right: 0px;
    position:absolute;
}
div{
    width: 600px;
    height: 600px;
    z-index: 1;
    display:block;
    margin-left: 0px;
    margin-right:0px;
    position:absolute;
    cursor:none;
}