建站
咨詢
售后
建站咨詢
新聞中心
我們對Windows各種各樣的鼠標樣式都不陌生，當鼠標移動到不同的地方時，當鼠標執(zhí)行不同的功能時，當系統(tǒng)處于不同的狀態(tài)時，都會使鼠標的形狀發(fā)生變化。而在網頁上往往只有當鼠標在超級鏈接上時才出現(xiàn)一個手形，在其它地方似乎沒有什么變化，同充滿動感的網頁顯得不怎么和諧。這里教大家用CSS來定義20種種鼠標樣式形狀。在CSS中，使用cursor屬性來定義鼠標的樣式。
用css控制鼠標樣式的語法如下:
把 * 換成如下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 |
cursor的pointer與hand區(qū)別
cursor:hand 與 cursor:pointer 的效果是一樣，都像手形光標。那為什么有兩個呢，這兩個有什么區(qū)別呢？
用瀏覽器測試得出以下結論：
cursor:hand ：IE完全支持。但是在 firefox 是不支持的，沒有效果。
cursor:pointer ：是 CSS2.0 的標準。所以 firefox 是支持的，但是 IE5.0 既之前版本不支持。IE6 開始支持。
所以為了兼容各個主流瀏覽器，盡量使用 cursor:pointer，而不要使用 cursor:hand。
實例：
實例
#div_default{cursor:default;}
#div_pointer{cursor:pointer;}
嘗試一下 ?
在瀏覽器預覽效果如下：
CSS Cursor鼠標指針樣式兼容性參考表
下面分享一個鼠標指針樣式兼容性在線參考表，
黑色圖標：表示該屬性兼容此瀏覽器。
灰色圖標：表示該屬性不兼容此瀏覽器。
新聞名稱：創(chuàng)新互聯(lián)CSS教程：css鼠標樣式語法及20種可選值（屬性）
網頁網址：http://fisionsoft.com.cn/article/coshsdd.html
