Question

所以我要做的是将光标更改为在加载某个页面时等待。

我认为用css可以做到这一点，当有人点击某个链接时，我试图实现这一点，所以我拥有的是：

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

但是这不起作用，当悬停链接时它是一只手，当等待一秒钟时，我希望这种等待继续直到新页面出现。

所以我的问题是：这是错的吗？实现我想要的目标？
或者我必须使用javascript吗？

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>

Answer 2

正如'回答'所说，您可以使用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";

};

}

Answer 3

与CSS选择器相关的cursor属性的含义是当鼠标位于与选择器匹配的元素上时，然后使用光标。因此，要更改整个文档的光标，您需要执行以下操作：

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

加载页面时更改光标

3 个答案: