DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS特效代碼 >> CSS光標cursor
CSS光標cursor
編輯:CSS特效代碼     
×
目錄
[1]定義 [2]標准樣式 [3]拓展樣式 [4]私有樣式 [5]定義樣式 [6]常見應用

前面的話

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

 

定義

  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: 幫助指針

拓展樣式

  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

私有樣式

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

  [注意]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;    

自定義樣式

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

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

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

常見應用

  鏈接的默認光標是手型指針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>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved