前面的話

　　在瀏覽器中，光標對于提供交互反饋很有用。通過在不同的場景中改變光標，就能賦予其不同的含義

?

定義

　　cursor光標

　　值: [<uri>,]*[auto | default | pointer | crosshair | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress]] | inherit

　　初始值: auto

　　應用于: 所有元素

　　繼承性: 有

?

標準樣式

　　CSS2提供了相對較少的選擇

url: 自定義光標的URL default: 默認光標，通常是一個箭頭 auto: 瀏覽器自動識別的光標 crosshair : 十字線 pointer: 手型指針 move: 移動指針 e-resize: 向東移動指針 ne-resize: 向東北移動指針 nw-resize: 向西北移動指針 n-resize: 向北移動指針 se-resize: 向東南移動指針 sw-resize: 向西南移動指針 s-resize: 向南移動指針 w-resize: 向西移動指針 text: 文本指針 wait: 指示程序正忙 help: 幫助指針

style="width: 100%; height: 320px;" src="https://demo.xiaohuochai.site/css/cursor/c1.html" frameborder="0" width="320" height="240">

?

拓展樣式

　　CSS3增加了更多的cursor的樣式值

　　[注意]所有拓展樣式IE7-瀏覽器都不支持

cursor:none (not IE8, Safari) cursor:context-menu (not Safari,Firefox,Chrome) cursor:cell (not Safari) cursor:alias (not Safari) cursor:copy (not IE,Safari) cursor:grab (not IE,Safari,Chrome) cursor:grabbing (not IE,Safari,Chrome) cursor:zoom-in (not IE,Safari) cursor:zoom-out (not IE,Safari) cursor:vertical-text cursor:no-drop cursor:not-allowed cursor:all-scroll cursor:ew-resize cursor:ns-resize cursor:nesw-resize cursor:nwse-resize cursor:col-resize cursor:row-resize

style="width: 100%; height: 400px;" src="https://demo.xiaohuochai.site/css/cursor/c2.html" frameborder="0" width="320" height="240">

私有樣式

　　有些瀏覽器還提供了增加瀏覽器前綴的私有樣式

　　[注意]safari將-webkit-grab和-webkit-grabbing都解釋為default

cursor:-webkit-grab; cursor: -moz-grab; cursor:-webkit-grabbing; cursor: -moz-grabbing; cursor:-webkit-zoom-in; cursor: -moz-zoom-in; cursor:-webkit-zoom-out; cursor: -moz-zoom-out;

style="width: 100%; height: 300px;" src="https://demo.xiaohuochai.site/css/cursor/c3.html" frameborder="0" width="320" height="240">

自定義樣式

　　所有瀏覽器都支持使用后綴名為.cur的文件，chrome、firefox、safari還支持使用普通圖片制作光標

　　[注意]使用URL自定義樣式，后面必須跟有一個逗號和某個通用關鍵字

//錯誤 cursor: url('m.cur'); //正確 cursor: url('m.cur'),auto;

style="width: 100%; height: 280px;" src="https://demo.xiaohuochai.site/css/cursor/c44.html" frameborder="0" width="320" height="240">

常見應用

　　鏈接的默認光標是手型指針pointer，通過光標的變化可以讓訪問者清楚的知道該元素是可點擊的

　　元素的title屬性用來提供元素的額外信息，配合help光標可以得到更好的表現方式

span[title]{cursor: help;border-bottom: 1px solid gray; } <div><span title="Cascading Style Sheets">CSS</span> is much too interesting</div>

style="width: 100%; height: 40px;" src="https://demo.xiaohuochai.site/css/cursor/c5.html" frameborder="0" width="320" height="240">

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的CSS光标cursor的全部內容，希望文章能夠幫你解決所遇到的問題。

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