Hiding a custom cursor over an iframe. Possible?

Question

I want the custom cursor to be hidden above the iframe.

iframe { cursor: none; } 

However, this does not do the trick.

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

Answer 1

Unfortunately, I had to resort to js for this.

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

This will not work cross-domain, but I don’t think you should use something like this cross domain anyway.

Assuming this is all in your own domain, another good js solution would be to introduce a stylesheet in an iframe by changing its own css to cursor: none to html or body. I used a similar strategy for my content manager - I load the real page directly into the admin panel, insert some elements and a stylesheet into it, and then add the administrator functions available directly on the site, loaded in the iframe.

Answer 2

You can also do this without JavaScript.
Example: http://jsfiddle.net/dyV7L/

HTML

 <div class="wrapper"> <iframe src="other/page.html"></iframe> <div class="hide-cursor"></div> </div> 

CSS

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

Answer 3

I think the only solution without srcipts: create a div, set the position: absolute for 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; }