如何用CSS設(shè)置連接鼠標(biāo)在上面變成手型?
白城ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景,ssl證書未來市場(chǎng)廣闊!成為創(chuàng)新互聯(lián)公司的ssl證書銷售渠道,可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠!如果有意向歡迎電話聯(lián)系或者加微信:18982081108(備注:SSL證書合作)期待與您的合作!
用CSS設(shè)置連接鼠標(biāo)在上面變成手型的方法:只需要對(duì)需要設(shè)置鼠標(biāo)指針的文字加上一個(gè) cursor: pointer 即可實(shí)現(xiàn)。
具體步驟:
一、打開前端開發(fā)軟件,新建一個(gè)html代碼頁面。
二、在新建的html代碼頁面上找到body,在這個(gè)body標(biāo)簽里創(chuàng)建一個(gè)標(biāo)簽,a案例中使用的是a。
三、為新家a添加鼠標(biāo)指針為手指樣式。在html代碼頁面中找到tilte,在這個(gè)title后面創(chuàng)建一個(gè)style,然后在style中新建一個(gè)樣式類,最后為這個(gè)樣式類添加鼠標(biāo)指針樣式。
四、把鼠標(biāo)指針樣式添加到a標(biāo)簽上。
五、保存html代碼后使用瀏覽器打開,當(dāng)鼠標(biāo)滑過a上的文字后即可看到鼠標(biāo)變?yōu)榱酥羔槧顟B(tài)。
六、直接復(fù)制以下代碼到新建的html文件上,粘貼保存后使用瀏覽器打開即可看到效果。
[img]屬性名: cursor
屬性值( 手勢(shì)狀態(tài) ):
auto : 默認(rèn)值。瀏覽器根據(jù)當(dāng)前情況自動(dòng)確定鼠標(biāo)光標(biāo)類型。
all-scroll : IE6.0 有上下左右四個(gè)箭頭,中間有一個(gè)圓點(diǎn)的光標(biāo)。用于標(biāo)示頁面可以向上下左右任何方向滾動(dòng)。
col-resize : IE6.0 有左右兩個(gè)箭頭,中間由豎線分隔開的光標(biāo)。用于標(biāo)示項(xiàng)目或標(biāo)題欄可以被水平改變尺寸。
crosshair : 簡(jiǎn)單的十字線光標(biāo)。
default : 客戶端平臺(tái)的默認(rèn)光標(biāo)。通常是一個(gè)箭頭。
hand : 豎起一只手指的手形光標(biāo)。就像通常用戶將光標(biāo)移到超鏈接上時(shí)那樣。
move : 十字箭頭光標(biāo)。用于標(biāo)示對(duì)象可被移動(dòng)。
help : 帶有問號(hào)標(biāo)記的箭頭。用于標(biāo)示有幫助信息存在。
no-drop : IE6.0 帶有一個(gè)被斜線貫穿的圓圈的手形光標(biāo)。用于標(biāo)示被拖起的對(duì)象不允許在光標(biāo)的當(dāng)前位置被放下。
not-allowed : IE6.0 禁止標(biāo)記(一個(gè)被斜線貫穿的圓圈)光標(biāo)。用于標(biāo)示請(qǐng)求的操作不允許被執(zhí)行。
pointer : IE6.0 和 hand 一樣。豎起一只手指的手形光標(biāo)。就像通常用戶將光標(biāo)移到超鏈接上時(shí)那樣。
progress : IE6.0 帶有沙漏標(biāo)記的箭頭光標(biāo)。用于標(biāo)示一個(gè)進(jìn)程正在后臺(tái)運(yùn)行。
row-resize : IE6.0 有上下兩個(gè)箭頭,中間由橫線分隔開的光標(biāo)。用于標(biāo)示項(xiàng)目或標(biāo)題欄可以被垂直改變尺寸。
text : 用于標(biāo)示可編輯的水平文本的光標(biāo)。通常是大寫字母 I 的形狀。
vertical-text : IE6.0 用于標(biāo)示可編輯的垂直文本的光標(biāo)。通常是大寫字母 I 旋轉(zhuǎn)90度的形狀。
wait : 用于標(biāo)示程序忙用戶需要等待的光標(biāo)。通常是沙漏或手表的形狀。
*-resize : 用于標(biāo)示對(duì)象可被改變尺寸方向的箭頭光標(biāo)。 w-resize | s-resize | n-resize | e-resize | ne-resize | sw-resize | se-resize | nw-resize
url ( url ) : IE6.0 用戶自定義光標(biāo)。使用絕對(duì)或相對(duì) url 地址指定光標(biāo)文件(后綴為 .cur 或者 .ani )。
那個(gè)要寫CSS來控制的,
body{
CURSOR: url(鼠標(biāo)圖片地址);
}
也可以這樣寫
body{
CURSOR: crosshair;//十字
}
你說的那種手抓形好像沒有,你可以做個(gè)手抓的圖片,然后把它定義成鼠標(biāo)樣式就好了。比如
body{
CURSOR: url('http://你地網(wǎng)站/手抓.jpg');
}
任意標(biāo)簽中插入 style="cursor:hand"
多種形狀可供選擇
hand是手型
pointer也是手型,這里推薦使用這種,因?yàn)檫@可以在多種瀏覽器下使用。
crosshair是十字型
text是移動(dòng)到文本上的那種效果
wait是等待的那種效果
default是默認(rèn)效果
help是問號(hào)
e-resize是向右的箭頭
ne-resize是向右上的箭頭
n-resize是向上的箭頭
nw-resize是向左上的箭頭
w-resize是向左的箭頭
sw-resize是左下的箭頭
s-resize是向下的箭頭
se-resize是向右下的箭頭
auto是由系統(tǒng)自動(dòng)給出效果