我們對Windows各種各樣的鼠標樣式都不陌生，當鼠標移動到不同的地方時，當鼠標執(zhí)行不同的功能時，當系統(tǒng)處于不同的狀態(tài)時，都會使鼠標的形狀發(fā)生變化。而在網(wǎng)頁上往往只有當鼠標在超級鏈接上時才出現(xiàn)一個手形，在其它地方似乎沒有什么變化，同充滿動感的網(wǎng)頁顯得不怎么和諧。這里教大家用CSS來定義20種種鼠標樣式形狀。在CSS中，使用cursor屬性來定義鼠標的樣式。
用css控制鼠標樣式的語法如下:
<span style="cursor:*">文本或其它頁面元素</span>把 * 換成如下20個可選值的一種：
cursor屬性取值如下，默認值為default。大家可能會說，cursor屬性值這么多，怎么記呀？其實大家不用擔心，在實際開發(fā)中，我們一般只用到“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; |
| 系統(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 |
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>cursor屬性</title>
<style type="text/css">
div
{
width:100px;
height:30px;
line-height:30px;
text-align:center;
border:1px solid #CCCCCC;
background-color: #40B20F;
color:white;
font-size:14px;
font-weight:bold;
}
#div_default{cursor:default;}
#div_pointer{cursor:pointer;}
</style>
</head>
<body>
<div id="div_default">鼠標默認樣式</div>
<div id="div_pointer">鼠標手狀樣式</div>
</body>
</html>
程序員人生，我編程，我富裕，記住wfuyu網(wǎng)，php教程，php學習，php手冊，CMS模版制作
聲明：本站大部分內(nèi)容是作者原創(chuàng)，少部分收集于互聯(lián)網(wǎng)供大家一起學習，原版權(quán)很多不明，如有侵權(quán)請聯(lián)系本站，謝謝！
粵ICP備14040726號-1?? 2015-2020 程序員人生 版權(quán)所有
