我們對Windows各種各樣的鼠標樣式都不陌生,當鼠標移動到不同的地方時,當鼠標執(zhí)行不同的功能時,當系統(tǒng)處于不同的狀態(tài)時,都會使鼠標的形狀發(fā)生變化。而在網頁上往往只有當鼠標在超級鏈接上時才出現(xiàn)一個手形,在其它地方似乎沒有什么變化,同充滿動感的網頁顯得不怎么和諧。這里教大家用CSS來定義20種種鼠標樣式形狀。在CSS中,使用cursor屬性來定義鼠標的樣式。
用css控制鼠標樣式的語法如下:
<span style="cursor:*">文本或其它頁面元素</span>
把 * 換成如下20個可選值的一種:
cursor屬性取值如下,默認值為default。大家可能會說,cursor屬性值這么多,怎么記呀?其實大家不用擔心,在實際開發(fā)中,我們一般只用到“default”和“pointer”這兩個屬性值,其他的一般都很少用得上。如果實在沒辦法還需要其他的,那就回來查這種表就行了。
crosshair; |
|
十字準心 |
The cursor render as a crosshair
光標表現(xiàn)為十字準線 |
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; |
|
系統(tǒng)默認 |
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
|
更多建議: