2010-09-17 90 views
5

所以我想要做的是改變光標等待一些頁面加載。加載頁面時改變光標

我認爲這是可能的CSS,我試圖做到這一點,當有人點擊一些鏈接,所以我有什麼是這樣的:

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

但是,這並不工作,這是一個手時,懸停鏈接,等待的時間是等待,但我希望這個等待,直到新頁面出現。

所以我的問題是: 這是錯的?爲了達到我想要的?
還是必須使用javascript?

+0

'光標:指針;' - 老IE「手」是不是X-瀏覽器,然後消失在IE9。 – scunliffe 2010-09-17 10:41:56

回答

12

要做到這一點是這樣的方式,而不是使用瀏覽器嗅探可以使用類名進行更改光標在第一頁(儘快鏈接被點擊顯示):

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

我也嘗試過這樣的事情,但沒有奏效。當然,我犯了一些錯誤,我想應用到元素。如何在html內部的鏈接中應用這個? – pavid 2010-09-17 10:46:34

+0

好的,現在我明白了 - 您有兩個步驟 - 1)在鏈接onclick()事件中,您需要將光標設置爲等待文檔正文。 2)在NEW頁面上,您需要將光標設置爲等待頁面完成加載(如上面的答案中所述)。無論你做什麼,當你無法控制光標時,舊頁面卸載和新頁面加載之間會有一段時間... – Basic 2010-09-17 11:54:50

+0

這就是我的問題!它沒有把任何東西放在新的頁面上,儘管它是完全合理的!其實我並沒有真正理解,但是這是有道理的。非常感謝! :) – pavid 2010-09-17 12:20:25

1

相對於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'; 
+0

我也嘗試過這樣的事情,但沒有奏效。當然,我犯了一些錯誤,我猜是把它應用到元素中。我應該如何在html內部的鏈接中應用它? – pavid 2010-09-17 10:45:19

2

爲「回答」說,你可以使用CSS光標連接到html元素,這將覆蓋整個頁面。

但是,你需要給聽衆頁面添加到每一個錨有一個onclick,它調用設置HTML或body元素上的光標的功能。當頁面重新加載光標將返回到默認再次作爲trhe的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"; 

}; 

} 
+0

以及我不知道爲什麼,但我無法使這些示例中的任何一個工作 – pavid 2010-09-17 10:56:53

+0

您是否有示例頁面,我們可以看看? – Alex 2010-09-17 10:58:39

+0

嗯,我試過你的例子。然後在html模板中,我有一個表格,裏面有​​我有鏈接:​​lala和你的例子。在css中當a:hover時,光標就是指針。剩下的就是用你的例子..Perhabs是愚蠢的,Javascript對我來說仍然很奇怪:P – pavid 2010-09-17 11:04:45