在瀏覽網頁時，通常看到的鼠標光標形狀有箭頭、手形、沙漏等，而在 windows 中實際看到的鼠標指針種類比這個還要多。

一般情況下，鼠標光標的形狀由瀏覽器負責控制，大多數情況的光標形狀為箭頭形狀，當指向鏈接時，光標形狀會變成手指形狀。

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

1. .resize {

2. cursor: row-resize;
3. }

其實，早在CSS2時就已經支持 cursor屬性了，不過當時提供的可選值相對較少。對于交互式Web應用來說，鼠標光標樣式已經變得越來越重要。因此，CSS3對 cursor屬性進行了擴展，并提供了更多的可選值，不同取值的含義、及在windows下的指針效果見表 4?10：

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

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

cursor屬性的默認值為 auto， 它表示由瀏覽器根據當前上下文，自動確定最適合的光標類型。auto 與 default 不同，default 表示使用客戶端操作系統默認的光標類型。

從上表可以看出，并非所有的光標類型都得到了支持，對于未支持的類型，則使用默認光標或由瀏覽器自動確定光標類型。

這顯然不能滿足所有用戶的需求，特別對于一些追求時尚和個性化的Web應用。因此，CSS允許用戶創建自己的鼠標光標圖片，并保存為 .cur 的光標文件，然后通過 cursor屬性來使用它們。如：

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

上述規則表示，要求瀏覽器加載名稱為 cursor.cur 光標文件，并將它用作鼠標光標。當然，瀏覽器也有可能不支持 .cur 格式的光標文件，或光標文件無法正常加載。因此，大多數瀏覽器要求必須指定一個備用的光標，否則，cursor屬性無效。如：

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

使用上述規則，在瀏覽器不支持 .cur 格式的光標文件，或光標文件無法正常加載時，就會使用 pointer 作為光標。

由于不同瀏覽器所支持的光標文件格式不盡相同，Opera和IE僅支持 .cur 格式，Firefox、Chrome和Safari既支持 .cur 格式，也支持常見的 .jpg、.gif、.jpg 等格式。因此，CSS還支持同時指定多個光標文件，中間用逗號隔開。如：

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

這樣的話，瀏覽器會逐個查看各個URL，直到找到一個可用的光標文件。如果瀏覽器無法找到任何可用的文件，就會使用 pointer 作為光標。

關于作者

歪脖先生，十五年以上軟件開發經驗，酷愛Web開發，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML寶典》、《揭秘CSS》、《Less簡明教程》、《JSON教程》、《Bootstrap2用戶指南》、《Bootstrap3實用教程》，并全部在 GitHub 上開源。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。