在瀏覽網(wǎng)頁(yè)時(shí)，通常看到的鼠標(biāo)光標(biāo)形狀有箭頭、手形、沙漏等，而在 windows 中實(shí)際看到的鼠標(biāo)指針?lè)N類(lèi)比這個(gè)還要多。

一般情況下，鼠標(biāo)光標(biāo)的形狀由瀏覽器負(fù)責(zé)控制，大多數(shù)情況的光標(biāo)形狀為箭頭形狀，當(dāng)指向鏈接時(shí)，光標(biāo)形狀會(huì)變成手指形狀。

為了創(chuàng)建豐富的Web應(yīng)用，CSS中提供了 cursor屬性，允許設(shè)計(jì)師為頁(yè)面上的任何元素自定義鼠標(biāo)光標(biāo)的形狀。如，把鼠標(biāo)光標(biāo)樣式設(shè)置為 row-resize，表示該對(duì)象可以被垂直改變尺寸：

1. .resize {

2. cursor: row-resize;
3. }

其實(shí)，早在CSS2時(shí)就已經(jīng)支持 cursor屬性了，不過(guò)當(dāng)時(shí)提供的可選值相對(duì)較少。對(duì)于交互式Web應(yīng)用來(lái)說(shuō)，鼠標(biāo)光標(biāo)樣式已經(jīng)變得越來(lái)越重要。因此，CSS3對(duì) cursor屬性進(jìn)行了擴(kuò)展，并提供了更多的可選值，不同取值的含義、及在windows下的指針效果見(jiàn)表 4?10：

表 4-10 cursor屬性的取值、含義及圖例

屬性值	含義	圖例
auto	瀏覽器根據(jù)當(dāng)前上下文，自動(dòng)確定最適合的光標(biāo)類(lèi)型
default	使用客戶端操作系統(tǒng)的默認(rèn)光標(biāo)
none	無(wú)光標(biāo)
context-menu	標(biāo)示對(duì)象是上下文菜單
help	標(biāo)示有幫助信息存在
pointer	豎起一只手指的手形光標(biāo)
progress	標(biāo)示程序忙，但用戶仍然可以與程序交互
wait	標(biāo)示程序忙，用戶需要等待直到程序不忙為止
cell	標(biāo)示對(duì)象是單元格
crosshair	簡(jiǎn)單的十字線光標(biāo)
text	標(biāo)示可編輯的水平文本
vertical-text	標(biāo)示可編輯的垂直文本
alias	標(biāo)示對(duì)象的別名
copy	標(biāo)示對(duì)象可拷貝
move	標(biāo)示對(duì)象可被移動(dòng)
no-drop	標(biāo)示被拖起的對(duì)象不允許在光標(biāo)的當(dāng)前位置被放下
not-allowed	標(biāo)示請(qǐng)求的操作不允許被執(zhí)行
grab	標(biāo)示對(duì)象可以被抓取
grabbing	標(biāo)示對(duì)象正在被抓取
e-resize	標(biāo)示對(duì)象可以向東改變尺寸
n-resize	標(biāo)示對(duì)象可以向北改變尺寸
ne-resize	標(biāo)示對(duì)象可以在東北方向改變尺寸
nw-resize	標(biāo)示對(duì)象可以在西北方向改變尺寸
s-resize	標(biāo)示對(duì)象可以向南改變尺寸
se-resize	標(biāo)示對(duì)象可以在東南方向改變尺寸
sw-resize	標(biāo)示對(duì)象可以在西北方向改變尺寸
w-resize	標(biāo)示對(duì)象可以被向西改變尺寸
ew-resize	標(biāo)示對(duì)象可以被水平改變尺寸
ns-resize	標(biāo)示對(duì)象可以被垂直改變尺寸
nesw-resize	標(biāo)示對(duì)象可以在東北和西南方向改變尺寸
nwse-resize	標(biāo)示對(duì)象可以在西北和東南方向改變尺寸
col-resize	標(biāo)示對(duì)象可以被水平改變尺寸
row-resize	標(biāo)示對(duì)象可以被垂直改變尺寸
all-scroll	標(biāo)示對(duì)象允許向四個(gè)方向滾動(dòng)
zoom-in	標(biāo)示對(duì)象可以被放大
zoom-out	標(biāo)示對(duì)象可以被縮小

cursor屬性的默認(rèn)值為 auto， 它表示由瀏覽器根據(jù)當(dāng)前上下文，自動(dòng)確定最適合的光標(biāo)類(lèi)型。auto 與 default 不同，default 表示使用客戶端操作系統(tǒng)默認(rèn)的光標(biāo)類(lèi)型。

從上表可以看出，并非所有的光標(biāo)類(lèi)型都得到了支持，對(duì)于未支持的類(lèi)型，則使用默認(rèn)光標(biāo)或由瀏覽器自動(dòng)確定光標(biāo)類(lèi)型。

這顯然不能滿足所有用戶的需求，特別對(duì)于一些追求時(shí)尚和個(gè)性化的Web應(yīng)用。因此，CSS允許用戶創(chuàng)建自己的鼠標(biāo)光標(biāo)圖片，并保存為 .cur 的光標(biāo)文件，然后通過(guò) cursor屬性來(lái)使用它們。如：

1. cursor: url(cursors/cursor.cur);

上述規(guī)則表示，要求瀏覽器加載名稱(chēng)為 cursor.cur 光標(biāo)文件，并將它用作鼠標(biāo)光標(biāo)。當(dāng)然，瀏覽器也有可能不支持 .cur 格式的光標(biāo)文件，或光標(biāo)文件無(wú)法正常加載。因此，大多數(shù)瀏覽器要求必須指定一個(gè)備用的光標(biāo)，否則，cursor屬性無(wú)效。如：

1. cursor: url(cursors/cursor.cur),pointer;

使用上述規(guī)則，在瀏覽器不支持 .cur 格式的光標(biāo)文件，或光標(biāo)文件無(wú)法正常加載時(shí)，就會(huì)使用 pointer 作為光標(biāo)。

由于不同瀏覽器所支持的光標(biāo)文件格式不盡相同，Opera和IE僅支持 .cur 格式，F(xiàn)irefox、Chrome和Safari既支持 .cur 格式，也支持常見(jiàn)的 .jpg、.gif、.jpg 等格式。因此，CSS還支持同時(shí)指定多個(gè)光標(biāo)文件，中間用逗號(hào)隔開(kāi)。如：

1. cursor: url(cursors/cursor.cur), url(cursors/cursor.png),url(cursors/cursor.gif),pointer;

這樣的話，瀏覽器會(huì)逐個(gè)查看各個(gè)URL，直到找到一個(gè)可用的光標(biāo)文件。如果瀏覽器無(wú)法找到任何可用的文件，就會(huì)使用 pointer 作為光標(biāo)。

關(guān)于作者

歪脖先生，十五年以上軟件開(kāi)發(fā)經(jīng)驗(yàn)，酷愛(ài)Web開(kāi)發(fā)，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML寶典》、《揭秘CSS》、《Less簡(jiǎn)明教程》、《JSON教程》、《Bootstrap2用戶指南》、《Bootstrap3實(shí)用教程》，并全部在 GitHub 上開(kāi)源。

總結(jié)

以上是生活随笔為你收集整理的CSS 鼠标样式 cursor属性[通俗易懂](w3cschool)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。