css鼠標樣式語法及20種可選值(屬性)
我們對Windows各種各樣的鼠標樣式都不陌生,當鼠標移動到不同的地方時,當鼠標執行不同的功能時,當系統處于不同的狀態時,都會使鼠標的形狀發生變化。而在網頁上往往只有當鼠標在超級鏈接上時才出現一個手形,在其它地方似乎沒有什么變化,同充滿動感的網頁顯得不怎么和諧。這里教大家用CSS來定義20種種鼠標樣式形狀。在CSS中,使用cursor屬性來定義鼠標的樣式。
用css控制鼠標樣式的語法如下:
<span style="cursor:*">文本或其它頁面元素</span>
把 * 換成如下20個可選值的一種:
cursor屬性取值如下,默認值為default。大家可能會說,cursor屬性值這么多,怎么記呀?其實大家不用擔心,在實際開發中,我們一般只用到“default”和“pointer”這兩個屬性值,其他的一般都很少用得上。如果實在沒辦法還需要其他的,那就回來查這種表就行了。
crosshair; | 十字準心 | The cursor render as a crosshair 光標表現為十字準線 | |
cursor: pointer; |
| 手 | The cursor render as a pointer (a hand) that indicates a link 光標標以暗示(手指)的形式來表明有一個連接 |
cursor: wait; |
| 等待/沙漏 | The cursor indicates that the program is busy (often a watch or an hourglass) |
cursor: help; |
| 幫助 | The cursor indicates that help is available (often a question mark or a balloon) |
cursor: no-drop; |
| 無法釋放 | cursor: no-drop; |
cursor: text; |
| 文字/編輯 | The cursor indicates text |
cursor: move; |
| 可移動對象 | The cursor indicates something that should be moved |
cursor: n-resize; |
| 向上改變大小(North) | The cursor indicates that an edge of a box is to be moved up (north) |
cursor: s-resize; |
| 向下改變大小(South) | The cursor indicates that an edge of a box is to be moved down (south) |
cursor: e-resize; |
| 向右改變大小(East) | The cursor indicates that an edge of a box is to be moved right (east) |
cursor: w-resize; | 向左改變大小(West) | The cursor indicates that an edge of a box is to be moved left (west) | |
cursor: ne-resize; |
| 向上右改變大小(North East) | The cursor indicates that an edge of a box is to be moved up and right (north/east) |
cursor: nw-resize; |
| 向上左改變大小(North West) | The cursor indicates that an edge of a box is to be moved up and left (north/west) |
cursor: se-resize; |
| 向下右改變大小(South East) | The cursor indicates that an edge of a box is to be moved down and right (south/east) |
cursor: sw-resize; |
| 向下左改變大小(South West) | The cursor indicates that an edge of a box is to be moved down and left (south/west) |
cursor: auto; |
| 自動 | The browser sets a cursor |
cursor:not-allowed; |
| 禁止 | cursor:not-allowed; |
cursor: progress; |
| 處理中 | cursor: progress; |
cursor: default; |
| 系統默認 | The default cursor (often an arrow) |
cursor: url(' # '); |
| 用戶自定義(可用動畫) | The url of a custom cursor to be used. Note: Always define a generic cursor at the end of the list in case none of the url-defined cursors can be used |
cursor的pointer與hand區別
用瀏覽器測試得出以下結論:
cursor:hand :IE完全支持。但是在 firefox 是不支持的,沒有效果。
cursor:pointer :是 CSS2.0 的標準。所以 firefox 是支持的,但是 IE5.0 既之前版本不支持。IE6 開始支持。
所以為了兼容各個主流瀏覽器,盡量使用 cursor:pointer,而不要使用 cursor:hand。
實例:
實例
#div_default{cursor:default;}
#div_pointer{cursor:pointer;}