Change cursor when loading page

So I'm trying to change the cursor to wait for some page to load.

I thought this was possible with css, I try to achieve this when someone clicks on some link, so I have this:

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

But it doesnโ€™t work, itโ€™s a hand at link building, and when the second waits, but I want this wait to continue until a new page appears.

So my question is: Is this wrong? To achieve what I want?
Or do I need to use javascript?

+5
source share
3 answers

A way to do it is something like this:

On the first page (to show as soon as the link is clicked):

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

( , ):

<script type="text/javsacript">
    //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>
+12

, 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";

};

}
+2

cursor CSS , , , . , - :

html {
    cursor: wait;
}

, ( , , ). , javascript:

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

Please note that cursor:handonly IE is supported and is required only for IE 5. The correct cursor name pointer. Of course, if you need to support IE 5, you need to use cursor:hand. Instead of using browning, you can use the class name to change the cursor:

CSS

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

JS:

document.body.className = 'handCursor';
+1
source

All Articles