CSS中cursor屬性給標簽加上小手形狀

 

HTML/CSS 2012-08-10 CSS,標簽

我們發現a標簽在網頁中有一個值得注意的地方，即鼠標移到a標簽上光標會變成一只小手的圖標，移出a標簽后又恢復為默認箭頭。

如今，JS在網頁中的功能越來越強大，有時候我們需要在頁面中添加一些可點擊的標簽實現一些功能。如以下代碼：

1 2 3

< meta charset = "utf-8" /> < title >給點擊標簽加上小手樣式 - 瓊台博客</ title > < h1 onclick = "alert('hi');" >點擊這里</ h1 >

 

鼠標指針變成文本輸入圖形

這個例子中，我們給h1標簽加上了一個onclick事件，單擊彈出hi提示框。雖然功能實現了，但我們發現鼠標指針移動到h1標簽上的時候指針圖形編程了一個文本輸入圖形。

 

外層套a標簽改變鼠標指針圖形

為了讓用戶明白這里是可以點擊的標簽，通常我們會在外層套一個a標簽，這樣當用戶移動到文本上的時候指針圖形自然也就跟a標簽一樣都是一只小手形狀，表示可以點擊。如代碼：

1 2 3

< meta charset = "utf-8" /> < title >給點擊標簽加上小手樣式 - 瓊台博客</ title > < a href = "#" >< h1 onclick = "alert('hi');" >點擊這里</ h1 ></ a >

有不少網站采用這種做法，這種做法並無不妥，也不會影響網頁的展現效果。

但這種方法也有幾點不妥：

1. 套上a標簽后，h1標簽繼承a標簽樣式；
2. 對於a標簽的href需要處理，又不能去掉；
3. 要修改樣式。

沒有加a標簽之前

加a標簽以后，顏色改變，多了一條下划線。

但我們通過CSS改變指針形狀也是一種簡便的方法。

 

通過CSS中的cursor屬性改變指針

在CSS中有一個cursor方法可以改變鼠標指針狀態圖標，我們可以利用這個方法來達到移動指針到h1標簽上的時候鼠標指針變成小手的狀態效果。如下代碼：

1 2 3

< meta charset = "utf-8" /> < title >給點擊標簽加上小手樣式 - 瓊台博客</ title > < h1 style = "cursor:pointer;" onclick = "alert('hi');" >點擊這里</ h1 >

效果圖：

通過以上例子，可以很好的避免了套a標簽帶來的樣式問題處理。

以上例子中cursor的值pointer表示小手狀態，cursor的屬性的值有以下類型，不同值可以實現不同的指針效果。

表中數據摘自w3school

 

可以自定義鼠標指針圖形

其中值為URL的表示可以自定義圖標代替系統指針圖標，利用這個值我們DIY鼠標指針樣式非常容易。好多比較個性的網頁幾乎都是通過此方式改變系統默認的箭頭指針圖形，使網頁看起來更加個性。

通過URL指定圖形方式，我們可以制作一個透明的圖形即可達到隱藏指針圖形的效果。感興趣的童鞋試試吧！