CSS cursor (滑鼠游標)屬性

滑鼠游標在設計上扮演一個很重要的功能
必須暗示使用者可以進行的操作
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>

CapturFiles-1月-07-2014_12.27.27

2. auto : 箭頭

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

CapturFiles-1月-07-2014_12.55.09

3. crosshair : 十字

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

CapturFiles-1月-07-2014_12.55.50

4. pointer : 手指

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

CapturFiles-1月-07-2014_12.56.26

5. text : 文字輸入

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

CapturFiles-1月-07-2014_01.52.39

6. move : 移動的十字

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

CapturFiles-1月-07-2014_01.53.13

7. wait : 讀取中游標

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

CapturFiles-1月-07-2014_01.54.13 (我畫面中是藍色的球,應該是截圖軟體的 Bug)

8. help : 問號

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

CapturFiles-1月-07-2014_01.54.45

9. progress : 讀取中游標

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

CapturFiles-1月-07-2014_01.55.16(我畫面中是藍色的球,應該是截圖軟體的 Bug)

10. not-allowed : 禁止游標

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

CapturFiles-1月-07-2014_01.55.42

11. no-drop : 禁止游標

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

CapturFiles-1月-07-2014_01.56.09

12. no-vertical-text : 箭頭

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

CapturFiles-1月-07-2014_01.59.10

13. all-scroll : 移動的十字

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

CapturFiles-1月-07-2014_01.59.34

14. col-resize : 橫向調整

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

CapturFiles-1月-07-2014_01.59.56

15. row-resize : 縱向調整

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

CapturFiles-1月-07-2014_02.00.18

16. e-resize :往右(東)調整

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

CapturFiles-1月-07-2014_02.01.42

17. ne-resize :往右上(東北)調整

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

CapturFiles-1月-07-2014_02.02.08

18. n-resize :往上(北)調整

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

CapturFiles-1月-07-2014_02.02.28

19. nw-resize :往左上(西北)調整

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

CapturFiles-1月-07-2014_02.02.48

20. w-resize :往左(西)調整

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

CapturFiles-1月-07-2014_02.03.11

21. sw-resize :往左下(西南)調整

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

CapturFiles-1月-07-2014_02.03.37

22. s-resize :往下(南)調整

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

CapturFiles-1月-07-2014_02.04.00

23. se-resize :往右下(東南)調整

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

CapturFiles-1月-07-2014_02.04.24

CSS cursor (滑鼠游標)屬性” 有 2 則迴響

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s