滑鼠 | =ChenTsu=

滑鼠游標在設計上扮演一個很重要的功能
必須暗示使用者可以進行的操作
CSS 中 cursor 這個屬性用來決定滑鼠移到上面時會怎麼顯示
實際去查了發現滑鼠游標的屬性居然有 20 種左右！
（過程其實有點一波多折…系統內建的螢幕截圖方式截不到游標…
又去下載了一個 Mac 的程式 Captur）

* 環境為 Mac 10.9 、Chrome 31.0.1650.63 （不同環境可能會有差）

1. default : 箭頭

<style>
#default { cursor: default; } /* CSS */
</style>
<button id="default">default</button>

2. auto : 箭頭

<style>
#auto { cursor: auto; } /* CSS */ 
</style>
<button id="auto">auto</button>

3. crosshair : 十字

<style>
#crosshair { cursor: crosshair; } /* CSS */ 
</style>
<button id="crosshair">crosshair</button>

4. pointer : 手指

<style>
#pointer { cursor: pointer; } /* CSS */
</style>
<button id="pointer">pointer</button>

5. text : 文字輸入

<style>
#text { cursor: text; } /* CSS */ 
</style>
<button id="text">text</button>

6. move : 移動的十字

<style>
#move { cursor: move; } /* CSS */
</style>
<button id="move">move</button>

7. wait : 讀取中游標

<style>
#wait { cursor: wait; } /* CSS */ 
</style>
<button id="wait">wait</button>

（我畫面中是藍色的球，應該是截圖軟體的 Bug）

8. help : 問號

<style>
#help { cursor: help; } /* CSS */
</style>
<button id="help">help</button>

9. progress : 讀取中游標

<style>
#progress { cursor: progress; } /* CSS */ 
</style>
<button id="progress">progress</button>

10. not-allowed : 禁止游標

<style>
#not-allowed { cursor: not-allowed; } /* CSS */ 
</style>
<button id="not-allowed">not-allowed</button>

11. no-drop : 禁止游標

<style>
#no-drop { cursor: no-drop; } /* CSS */
</style>
<button id="no-drop">no-drop</button>

12. no-vertical-text : 箭頭

<style>
#no-vertical-text { cursor: no-vertical-text; } /* CSS */
</style>  
<button id="no-vertical-text">no-vertical-text</button>

13. all-scroll : 移動的十字

<style>
#all-scroll { cursor: all-scroll; } /* CSS */ 
</style>
<button id="all-scroll">all-scroll</button>

14. col-resize : 橫向調整

<style>
#col-resize { cursor: col-resize; } /* CSS */
</style>
<button id="col-resize">col-resize</button>

15. row-resize ：縱向調整

<style>
#row-resize { cursor: row-resize; } /* CSS */ 
</style>
<button id="row-resize">row-resize</button>

16. e-resize ：往右（東）調整

<style>
#e-resize { cursor: e-resize; } /* CSS */
</style>
<button id="e-resize">e-resize</button>

17. ne-resize ：往右上（東北）調整

<style>
#ne-resize { cursor: ne-resize; } /* CSS */
</style>
<button id="ne-resize">ne-resize</button>

18. n-resize ：往上（北）調整

<style>
#n-resize { cursor: n-resize; } /* CSS */
</style>
<button id="n-resize">n-resize</button>

19. nw-resize ：往左上（西北）調整

<style>
#nw-resize { cursor: nw-resize; } /* CSS */
</style>
<button id="nw-resize">nw-resize</button>

20. w-resize ：往左（西）調整

<style>
#w-resize { cursor: w-resize; } /* CSS */
</style>
<button id="w-resize">w-resize</button>

21. sw-resize ：往左下（西南）調整

<style>
#sw-resize { cursor: sw-resize; } /* CSS */  
</style>
<button id="sw-resize">sw-resize</button>

22. s-resize ：往下（南）調整

<style>
#s-resize { cursor: s-resize; } /* CSS */  
</style>
<button id="s-resize">s-resize</button>

23. se-resize ：往右下（東南）調整

<style>
#se-resize { cursor: se-resize; } /* CSS */ 
</style>
<button id="se-resize">se-resize</button>

=ChenTsu=