在CSS中，可以使用cursor屬性來設定滑鼠手勢。下面本篇文章就來給大家介紹一下cursor屬性。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。
cursor屬性定義了滑鼠指針放在一個元素邊界範圍内時所用的光标形狀。有時我們需要動态的變化光标樣式時就需要這個屬性。
屬性值(手勢狀态)：auto : 預設值。浏覽器根據目前情況自動确定滑鼠光标類型。
all-scroll : IE6.0 有上下左右四個箭頭，中間有一個圓點的光标。用于标示頁面可以向上下左右任何方向滾動。
col-resize : IE6.0 有左右兩個箭頭，中間由豎線分隔開的光标。用于标示項目或标題欄可以被水準改變尺寸。
crosshair : 簡單的十字線光标。
default : 用戶端平台的預設光标。通常是一個箭頭。
hand : 豎起一隻手指的手形光标。就像通常使用者将光标移到超連結上時那樣。
move : 十字箭頭光标。用于标示對象可被移動。
help : 帶有問号标記的箭頭。用于标示有幫助資訊存在。
no-drop : IE6.0 帶有一個被斜線貫穿的圓圈的手形光标。用于标示被拖起的對象不允許在光标的目前位置被放下。
not-allowed : IE6.0 禁止标記(一個被斜線貫穿的圓圈)光标。用于标示請求的操作不允許被執行。
pointer : IE6.0 和 hand 一樣。豎起一隻手指的手形光标。就像通常使用者将光标移到超連結上時那樣。
progress : IE6.0 帶有沙漏标記的箭頭光标。用于标示一個程序正在背景運作。
row-resize : IE6.0 有上下兩個箭頭，中間由橫線分隔開的光标。用于标示項目或标題欄可以被垂直改變尺寸。
text : 用于标示可編輯的水準文本的光标。通常是大寫字母 I 的形狀。
vertical-text : IE6.0 用于标示可編輯的垂直文本的光标。通常是大寫字母 I 旋轉90度的形狀。
wait : 用于标示程式忙使用者需要等待的光标。通常是沙漏或手表的形狀。
*-resize : 用于标示對象可被改變尺寸方向的箭頭光标。w-resize | s-resize | n-resize | e-resize | ne-resize | sw-resize | se-resize | nw-resize
url ( url ) : IE6.0 使用者自定義光标。使用絕對或相對 url 位址指定光标檔案(字尾為 .cur 或者 .ani )。
示範
總體測試代碼
cursor樣式示範
.cursorDiv{
width: 300px;
height:150px;
background: #FF6600;
border:solid 1px;
cursor:url('img/sanchaji.png'),pointer;
}
Jquery操作$(".cursorDiv").css({"cursor":"progress",})
1.cursor:url()
可以将光标圖形自定義為自己喜歡的圖示樣式，url()裡是一個圖示的連接配接，可以是png、ico、gif等，注意，要在url()後面定義一個普通的光标，否則自定義的圖示不起作用！cursor:url('img/sanchaji.png'),pointer;
結果樣式
2.cursor:default
預設光标(通常是一個箭頭)cursor:default;
結果樣式
3.cursor:auto
預設。浏覽器設定的光标。cursor:auto;
結果樣式
4.cursor:crosshair
光标呈現為十字線。cursor:crosshair;
結果樣式
5.cursor:pointer
光标呈現為訓示連結的指針(一隻手)cursor:pointer;
結果樣式
6.cursor:move
此光标訓示某對象可被移動。cursor:move;
結果樣式
7.cursor:e-resize
此光标訓示矩形框的邊緣可被向右(東)移動。cursor:e-resize;
結果樣式
8.cursor:ne-resize
此光标訓示矩形框的邊緣可被向上及向右移動(北/東)。cursor:ne-resize;
結果樣式
9.cursor:nw-resize
此光标訓示矩形框的邊緣可被向上及向左移動(北/西)。cursor:nw-resize;
結果樣式
10.cursor:n-resize
此光标訓示矩形框的邊緣可被向上(北)移動。cursor:n-resize;
結果樣式
11.cursor:se-resize
此光标訓示矩形框的邊緣可被向下及向右移動(南/東)。cursor:se-resize;
結果樣式
12.cursor:sw-resize
此光标訓示矩形框的邊緣可被向下及向左移動(南/西)。cursor:sw-resize;
結果樣式
13.cursor:s-resize
此光标訓示矩形框的邊緣可被向下移動(南)。cursor:s-resize;
結果樣式
14.cursor:w-resize
此光标訓示矩形框的邊緣可被向左移動(西)。cursor:w-resize;
結果樣式
15.cursor:text
此光标訓示文本。cursor:text;
結果樣式
16.cursor:wait
此光标訓示程式正忙(通常是一隻表或沙漏)。cursor:wait;
結果樣式
17.cursor:help
此光标訓示可用的幫助(通常是一個問号或一個氣球)。cursor:help;
結果樣式
18.cursor:progresscursor:progress;
結果樣式
測試浏覽器為Chrome
更多web開發知識，請查閱 HTML中文網 ！！