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

Question

我希望用户在iframe上时鼠标游标能够隐藏。

iframe {
  cursor: none;
}

然而这并没有起到作用。

我需要使用JavaScript吗？JavaScript能做到吗？解决方案是什么？

- user2700923

Answer 1

你也可以不用 JavaScript 来实现。
例如：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>

- Florent

---

这个并不能完全涵盖各种用途。如果用户仍然需要与 iframe 进行交互怎么办？pointer-events:none 只会阻止 div 达到预期的效果。 - user2700923

没有光标进入iframe会导致不好的用户体验，是吗？ - Florent

pointer-events:none，使光标恢复正常行为（不再是自定义的）。 - escusado

Answer 2

很遗憾，我不得不用js来解决这个问题。

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

这种方法在跨域时无法使用，但我认为你不应该在跨域情况下使用类似的东西。

如果假设这一切都在您自己的域上，另一个好的js解决方案是将样式表注入iframe中，在html或body上更改其自身css以 cursor: none。我已经使用过类似的策略来管理我的内容 - 我将真正的页面直接加载到管理面板中，将一些元素和样式表注入其中，然后在站点中拥有管理功能 - 在iframe中加载。

- m59

---

这个是正确的，但正如作者所说，它可能会引发CORS问题。 - Florent

Answer 3

我认为唯一没有脚本的解决方案是：创建一个 div，将位置设置为绝对定位，并将 iframe 与 div 重叠，使用 z-index 将 div 放在 iframe 上面。 例如：

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

- Phelion

---

和@Florent的答案概念相同，但他的更好。 - m59