cambia cursore durante il caricamento della pagina

Question

Quindi, quello che sto cercando di fare è cambiare il cursore in modo che attenda quando si carica una pagina.

Ho pensato che questo era possibile con i CSS, ho cercando di realizzare questo quando qualcuno clicca su qualche link, quindi quello che ho è questa:

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

Ma questo non funziona, è una mano quando hover collegamenti, e quando per un secondo è in attesa, ma voglio che l'attesa continui finché non viene visualizzata la nuova pagina.

Quindi la mia domanda è: È sbagliato? Per ottenere quello che voglio?
Oppure devo usare javascript?

Answer 1

Il modo per farlo è qualcosa di simile:

Nella prima pagina (da mostrare non appena si fa clic sul collegamento):

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

Nella seconda pagina (per mostrare fino a quando la nuova pagina termina il caricamento):

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

Answer 2

Il significato della proprietà cursor in relazione al selettore CSS è che quando il mouse si trova su un elemento che corrisponde al selettore, utilizzare il cursore. Quindi, per cambiare il cursore per il documento complessivo che devi fare qualcosa di simile:

html { 
    cursor: wait; 
} 

Ovviamente, questo cambierà il cursore per sempre (o fino a quando l'utente chiude la pagina, si verifica per primo). Per fare questo in modo dinamico è necessario utilizzare javascript:

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

noti che cursor:hand è supportato solo da IE e necessario solo per IE 5. Il nome del cursore corretto è pointer. Ovviamente, se hai bisogno di supportare IE 5, devi usare cursor:hand. Invece di utilizzare browser sniffing è possibile utilizzare il nome della classe per cambiare il cursore:

CSS:

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

JS:

document.body.className = 'handCursor'; 

Answer 3

come 'risposto' dice che si può utilizzare i CSS per attaccare il cursore l'elemento HTML, che dovrebbe coprire l'intera pagina.

Ma è necessario aggiungere un listener a ogni singolo ancoraggio nella pagina con un onclick, che chiama una funzione che imposta il cursore sull'elemento HTML o sul corpo. Quando la pagina ricarica il cursore tornerà al default di nuovo come trhe javascript avrebbe fatto rinfrescato

var anchors = document.getElementsByTagName("a"); 
for(var i=0,len=anchors.length;i<len;i++) 
{ 

anchors[i].onclick = function() 
{ 

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

}; 

}