?
This document uses PHP Chinese website manual Release
cursor:[<url> [<x> <y>]?,]*[ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | 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 | grab | grabbing]
默認(rèn)值:auto
適用于:所有元素
繼承性:有
動(dòng)畫性:否
計(jì)算值:指定值
<url>:使用絕對(duì)或者相對(duì)地址引入外部圖像作為光標(biāo)形狀
<url> <x> <y>:通過(guò)<x> <y>兩個(gè)值指定具體需要顯示的圖像位置。類似 <' background-position '>
auto:用戶代理基于當(dāng)前上下文決定光標(biāo)形狀
default:相關(guān)平臺(tái)的默認(rèn)光標(biāo)形狀,通常為箭頭。
none:沒(méi)有光標(biāo)形狀
其他待完成...
使用自定義圖像作為光標(biāo)類型,IE, Opera只支持*.cur等特定的圖片格式;Firefox, Chrome, Safari既支持特定圖片類型也支持常見(jiàn)的*.png, *.gif, *.jpg等圖片格式。
cursor的屬性值可以是一個(gè)序列
示例代碼:
:link,:visited{ cursor:url(example.svg#linkcursor), url(hyper.cur), url(hyper.png) 2 3, pointer; }
本例用來(lái)給所有的超鏈接定義光標(biāo)類型,客戶端如果不支持SVG類型的光標(biāo),則使用下個(gè)"hyper.cur";如果cur類型也不支持,則使用下個(gè)"hyper.png";依次類推。
對(duì)應(yīng)的腳本特性為cursor。
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
---|---|---|---|---|---|---|---|---|
Basic Support | 6.0-11.0#1 | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+ |
none | 6.0-8.0 | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+ |
9.0+ | ||||||||
alias | cell | copy | ew-resize | ns-resize | nesw-resize | nwse-resize | context-menu | 6.0-9.0 | 2.0+ | 4.0+ | 6.0+ | 15.0+ | 6.0+ | 2.1+ | 18.0+ |
10.0+ | ||||||||
zoom-in | zoom-out | 6.0-11.0 | 2.0-23.0-moz- | 4.0-36.0-webkit- | 6.0-8.0-webkit- | 15.0-23.0-webkit- | 6.0-8.3 | 2.1-4.4.4 | 18.0-42.0 |
24.0+ | 37.0+ | 24.0+ | ||||||
grab | grabbing | 6.0-11.0 | 2.0-27.0-moz- | 4.0-22.0-webkit- | 6.0-8.0-webkit- | 15.0+ | 6.0-8.3 | 2.1-4.4.4 | 18.0-42.0 |
28.0+ | 23.0+ |
6.0-8.0不支持:url()的position位置,不支持除.cur之外的圖像格式。
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>cursor_CSS參考手冊(cè)_web前端開(kāi)發(fā)參考手冊(cè)系列</title> <meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" /> <style> .test{width:400px;border-collapse:collapse;font:14px/1.5 georgia,arial,serif,sans-serif;} .test td{padding:2px 10px;border:1px solid #ddd;} .test td:hover{background:#eee;} .auto{cursor:auto;} .default{cursor:default;} .none{cursor:none;} .context-menu{cursor:context-menu;} .help{cursor:help;} .pointer{cursor:pointer;} .progress{cursor:progress;} .wait{cursor:wait;} .cell{cursor:cell;} .crosshair{cursor:crosshair;} .text{cursor:text;} .vertical-text{cursor:vertical-text;} .alias{cursor:alias;} .copy{cursor:copy;} .move{cursor:move;} .no-drop{cursor:no-drop;} .not-allowed{cursor:not-allowed;} .e-resize{cursor:e-resize;} .n-resize{cursor:n-resize;} .ne-resize{cursor:ne-resize;} .nw-resize{cursor:nw-resize;} .s-resize{cursor:s-resize;} .se-resize{cursor:se-resize;} .sw-resize{cursor:sw-resize;} .w-resize{cursor:w-resize;} .ew-resize{cursor:ew-resize;} .ns-resize{cursor:ns-resize;} .nesw-resize{cursor:nesw-resize;} .nwse-resize{cursor:nwse-resize;} .col-resize{cursor:col-resize;} .row-resize{cursor:row-resize;} .all-scroll{cursor:all-scroll;} .zoom-in{cursor:zoom-in;} .zoom-out{cursor:zoom-out;} .url{cursor:url(skin/cursor.gif), url(skin/cursor.png), url(skin/cursor.jpg), pointer;} </style> </head> <body> <table class="test"> <caption>cursor光標(biāo)類型</caption> <tbody> <tr> <td class="auto">auto</td> <td class="default">default</td> <td class="none">none</td> <td class="context-menu">context-menu</td> <td class="help">help</td> <td class="pointer">pointer</td> <td class="progress">progress</td> </tr> <tr> <td class="wait">wait</td> <td class="cell">cell</td> <td class="crosshair">crosshair</td> <td class="text">text</td> <td class="vertical-text">vertical-text</td> <td class="alias">alias</td> <td class="copy">copy</td> </tr> <tr> <td class="move">move</td> <td class="no-drop">no-drop</td> <td class="not-allowed">not-allowed</td> <td class="e-resize">e-resize</td> <td class="n-resize">n-resize</td> <td class="ne-resize">ne-resize</td> <td class="nw-resize">nw-resize</td> </tr> <tr> <td class="s-resize">s-resize</td> <td class="se-resize">se-resize</td> <td class="sw-resize">sw-resize</td> <td class="w-resize">w-resize</td> <td class="ew-resize">ew-resize</td> <td class="ns-resize">ns-resize</td> <td class="nesw-resize">nesw-resize</td> </tr> <tr> <td class="nwse-resize">nwse-resize</td> <td class="col-resize">col-resize</td> <td class="row-resize">row-resize</td> <td class="all-scroll">all-scroll</td> <td class="url">url</td> <td class="zoom-in">zoom-in</td> <td class="zoom-out">zoom-out</td> </tr> </tbody> </table> </body> </html>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例