Question

我希望用户的光标隐藏在iframe上。

iframe {
  cursor: none;
}

然而，它没有做到这一点。

我需要使用JavaScript吗？ JavaScript甚至可以做到吗？解决方案是什么？

Answer 1

你也可以在没有JavaScript的情况下做到这一点示例：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 2

不幸的是，我不得不求助于这个。

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

这不会跨域工作，但我认为你不应该使用类似跨域的东西。

假设这一切都在您自己的域中，另一个好的js解决方案是将样式表注入iframe，将其自己的css更改为html或body上的cursor: none。我为我的内容管理器使用了类似的策略 - 我将实际页面加载到管理面板中，向其中注入一些元素和样式表，然后在网站上提供管理功能 - 在iframe中加载。

Answer 3

我认为没有srcipts的唯一解决方案：创建一个div，设置position：绝对到div和iframe，并使用z-index在ifram上设置div。例如：

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;
}

将用户的光标隐藏在iframe上。可能？

3 个答案:

HTML

CSS