作用
cursor屬性定義當光標放在一個元素的邊界內(nèi)時讯屈,光標的樣式碱工。有時我們需要動態(tài)的變化光標樣式時就需要這個屬性涎嚼。
屬性值
演示
總體測試代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>cursor樣式演示</title>
<style type="text/css">
.cursorDiv{
width: 300px;
height:150px;
background: #FF6600;
border:solid 1px;
cursor:url('img/sanchaji.png'),pointer;
}
</style>
</head>
<body>
<div class="cursorDiv">
</div>
</body>
</html>
Jquery操作
$(".cursorDiv").css({"cursor":"progress",})
1.url()
可以將光標圖形自定義為自己喜歡的圖標樣式,url()里是一個圖標的連接配并,可以是png丑搔、ico厦瓢、gif等,注意啤月,要在url()后面定義一個普通的光標煮仇,否則自定義的圖標不起作用!
cursor:url('img/sanchaji.png'),pointer;
結(jié)果樣式
2.default
默認光標(通常是一個箭頭)
cursor:default;
結(jié)果樣式
3.auto
默認谎仲。瀏覽器設(shè)置的光標浙垫。
cursor:auto;
結(jié)果樣式
4.crosshair
光標呈現(xiàn)為十字線。
cursor:crosshair;
結(jié)果樣式
5.pointer
光標呈現(xiàn)為指示鏈接的指針(一只手)
cursor:pointer;
結(jié)果樣式
6.move
此光標指示某對象可被移動郑诺。
cursor:move;
結(jié)果樣式
7.e-resize
此光標指示矩形框的邊緣可被向右(東)移動夹姥。
cursor:e-resize;
結(jié)果樣式
8.ne-resize
此光標指示矩形框的邊緣可被向上及向右移動(北/東)。
cursor:ne-resize;
結(jié)果樣式
9.nw-resize
此光標指示矩形框的邊緣可被向上及向左移動(北/西)辙诞。
cursor:nw-resize;
結(jié)果樣式
10.n-resize
此光標指示矩形框的邊緣可被向上(北)移動辙售。
cursor:n-resize;
結(jié)果樣式
11.se-resize
此光標指示矩形框的邊緣可被向下及向右移動(南/東)。
cursor:se-resize;
結(jié)果樣式
12.sw-resize
此光標指示矩形框的邊緣可被向下及向左移動(南/西)飞涂。
cursor:sw-resize;
結(jié)果樣式
13.s-resize
此光標指示矩形框的邊緣可被向下移動(南)旦部。
cursor:s-resize;
結(jié)果樣式
14.w-resize
此光標指示矩形框的邊緣可被向左移動(西)。
cursor:w-resize;
結(jié)果樣式
15.text
此光標指示文本较店。
cursor:text;
結(jié)果樣式
16.wait
此光標指示程序正忙(通常是一只表或沙漏)士八。
cursor:wait;
結(jié)果樣式
17.help
此光標指示可用的幫助(通常是一個問號或一個氣球)。
cursor:help;
結(jié)果樣式
18.progress
cursor:progress;
結(jié)果樣式