加载页面时更改光标

Question

所以我的目标是在页面加载时将光标更改为等待状态。我认为这可以通过css实现，当某人单击某个链接时，我试图实现这一点，所以我有以下代码：

#something a:hover { cursor: hand; }
#something a:active { cursor: wait; }

但是这并不起作用，当鼠标悬停在链接上时，它是一个手形图标，并且当等待一秒钟后，但我希望这个等待持续到新页面出现。

所以我的问题是：这样做是错误的吗？要实现我想要的效果，我必须使用JavaScript吗？

- psoares

---

cursor:pointer; - 旧版IE的“手”不是跨浏览器的，而且在IE9中已经消失了。 - scunliffe

Answer 1

这可以通过以下方式实现：

在第一个页面（链接被点击后立即显示）上：

<a href="http://www.example.com/Page2.html" onclick="document.body.style.cursor='wait'; return true;">

---

在第二页（直到新页面完成加载）显示：

<script type="text/javascript">
    // Set the cursor ASAP to "Wait"
    document.body.style.cursor='wait';

    // When the window has finished loading, set it back to default...
    window.onload=function(){document.body.style.cursor='default';}
</script>

请注意页面是按顺序加载的，因此在第二页中 cursor='wait' 行越靠近页面顶部，新页面显示光标的延迟就会越少。

- Basic

---

我也尝试过这样的方法，但没有成功。我肯定是做错了什么，我猜是应用到元素上的问题。我该如何将其应用于链接内部，即HTML内部？ - psoares

好的，现在我明白了 - 你有一个两步骤的过程 - 1）在链接的onclick（）事件中，您需要将光标设置为等待文档主体。2）在新页面上，您需要设置光标等待页面完成加载（就像我在上面的答案中所示）。无论您做什么，在旧页面卸载和新页面加载之间都会有一点时间，此时您无法控制光标... - Basic

那正是我的问题！尽管它完全有意义，但它没有将任何内容放在新页面上！实际上，我并不是真正理解，但那样说很有道理。非常感谢！ :) - psoares

很高兴我能帮到你。请注意，有些浏览器在加载新页面时会停止执行JavaScript代码 - 所以请确保您始终在尝试更改页面（如上面演示的）之前设置光标，而不是之后。祝你好运！ - Basic

我想把光标改成一些图片。你知道如何做吗？或者有没有什么好的地方可以学习jQuery或JavaScript？ - psoares

你不能使用任意图像作为光标 - 你需要创建一个img标签，并不断将其移动到鼠标的位置 - JQuery教程在这里：http://docs.jquery.com/Tutorials 我建议你在接触JQuery之前先学习JavaScript - JQuery是JS的扩展，但如果你不理解基本原理，当出现意外情况时你就不会知道“为什么”... 只需谷歌搜索“JavaScript教程”。 - Basic

Answer 2

如“answered”所说，您可以使用CSS将光标附加到HTML元素上，这应该覆盖整个页面。

但是，您需要为页面中的每个单独的锚点添加一个带有onclick的侦听器，该侦听器调用一个函数，在HTML或body元素上设置光标。当页面重新加载时，由于JavaScript已刷新，光标将返回默认值。

var anchors = document.getElementsByTagName("a");
for (var i=0,len=anchors.length; i<len; i++) {
  anchors[i].onclick = function() {
    document.body.style.cursor = "wait";
  };
}

- Alex

---

我不确定为什么，但我无法使这些示例中的任何一个工作。 - psoares

你有一个我们可以查看的示例页面吗？ - Alex

好的，我试了一下你的例子。然后在HTML模板中，我有一个表格，在<td>标签内，我加入了链接：<td><a href="#"> lala</a></ td>和你的例子。在CSS中，当鼠标悬停时，光标会变成指针，其余部分使用了你的例子。或许这是什么小问题，Javascript对我来说还是很奇怪 :P - psoares

Answer 3

cursor 属性在 CSS 选择器中的含义是当鼠标悬停在匹配该选择器的元素上时使用指定的光标。因此，要更改整个文档的光标，您需要执行以下操作：

html {
    cursor: wait;
}

显然，这将永久改变光标的样式（或者直到用户关闭页面为止）。如果要动态实现这一点，您需要使用JavaScript：

document.body.style.cursor = 'wait';

请注意，cursor:hand 仅由 IE 支持，并且仅适用于 IE 5。正确的光标名称是 pointer。当然，如果您需要支持 IE 5，则需要使用 cursor:hand。您可以使用类名更改光标，而不是使用浏览器嗅探技术：

CSS：

.handCursor {
    cursor: pointer;
    cursor: hand;
}

JS:

document.body.className = 'handCursor';

- slebetman

---

我也尝试过这样的方法，但没有成功。我肯定做错了什么，我猜是应用到元素上的问题。我该如何将其应用于链接内部，即HTML内部？ - psoares