天天看點

修改滑鼠指針樣式

在編寫html時,有時我們需要修改滑鼠指針的樣式,比較形象的有qq農場的指針樣式,如果我們自定義也可以實作該效果。大家可以通過修改css樣式cursor來實作。

cursor取值:

auto

: 

預設值。浏覽器根據目前情況自動确定滑鼠光标類型。

all-scroll

IE6.0

有上下左右四個箭頭,中間有一個圓點的光标。用于标示頁面可以向上下左右任何方向滾動。

col-resize

有左右兩個箭頭,中間由豎線分隔開的光标。用于标示項目或标題欄可以被水準改變尺寸。

crosshair

簡單的十字線光标。

default

用戶端平台的預設光标。通常是一個箭頭。

hand

豎起一隻手指的手形光标。就像通常使用者将光标移到超連結上時那樣。

move

十字箭頭光标。用于标示對象可被移動。

help

帶有問号标記的箭頭。用于标示有幫助資訊存在。

no-drop

帶有一個被斜線貫穿的圓圈的手形光标。用于标示被拖起的對象不允許在光标的目前位置被放下。

not-allowed

禁止标記(一個被斜線貫穿的圓圈)光标。用于标示請求的操作不允許被執行。

pointer

和 hand 一樣。豎起一隻手指的手形光标。就像通常使用者将光标移到超連結上時那樣。

progress

帶有沙漏标記的箭頭光标。用于标示一個程序正在背景運作。

row-resize

有上下兩個箭頭,中間由橫線分隔開的光标。用于标示項目或标題欄可以被垂直改變尺寸。

text

用于标示可編輯的水準文本的光标。通常是大寫字母 I 的形狀。

vertical-text

用于标示可編輯的垂直文本的光标。通常是大寫字母 I 旋轉90度的形狀。

wait

用于标示程式忙使用者需要等待的光标。通常是沙漏或手表的形狀。

*-resize

用于标示對象可被改變尺寸方向的箭頭光标。w-resize | s-resize | n-resize |

e-resize | ne-resize | sw-resize | se-resize |

nw-resize

url ( url )

使用者自定義光标。使用絕對或相對 url 位址指定光标檔案(字尾為 .cur 或者 .ani )。

說明:

設定或檢索在對象上移動的滑鼠指針采用的光标形狀。

此屬性的值可以是多個,其間用逗号分隔。假如第一個值不可以被用戶端系統了解或所指定的光标無法找到及顯示,則第二個值将被嘗試使用。依此類推。假如全部值都不可用的話,則此屬性不會發生作用。光标不會被改變。

此屬性對于 currentStyle 對象而言是隻讀的。對于其他對象而言是可讀寫的。

對應的腳本特性為cursor。

示例:

p { cursor: text; }

a { cursor: pointer;

}

body { cursor:

url("mycursor.gif"), url("p_w_picpaths/cursors/footcursor.jpg"), default; } 

繼續閱讀