建站
咨詢
售后
建站咨詢
新聞中心
css 如何改變鼠標(biāo)圖標(biāo)
css中cursor屬性就規(guī)定了要顯示的鼠標(biāo)樣式，大概有以下
創(chuàng)新互聯(lián)從2013年創(chuàng)立，先為孟州等服務(wù)建站，孟州等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為孟州企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
default 默認(rèn)光標(biāo)（通常是一個(gè)箭頭）
auto 默認(rèn)。瀏覽器設(shè)置的光標(biāo)。
crosshair 光標(biāo)呈現(xiàn)為十字線。
pointer 光標(biāo)呈現(xiàn)為指示鏈接的指針（一只手）
move 此光標(biāo)指示某對象可被移動(dòng)。
e-resize 此光標(biāo)指示矩形框的邊緣可被向右（東）移動(dòng)。
ne-resize 此光標(biāo)指示矩形框的邊緣可被向上及向右移動(dòng)（北/東）。
nw-resize 此光標(biāo)指示矩形框的邊緣可被向上及向左移動(dòng)（北/西）。
n-resize 此光標(biāo)指示矩形框的邊緣可被向上（北）移動(dòng)。
se-resize 此光標(biāo)指示矩形框的邊緣可被向下及向右移動(dòng)（南/東）。
sw-resize 此光標(biāo)指示矩形框的邊緣可被向下及向左移動(dòng)（南/西）。
s-resize 此光標(biāo)指示矩形框的邊緣可被向下移動(dòng)（南）。
w-resize 此光標(biāo)指示矩形框的邊緣可被向左移動(dòng)（西）。
text 此光標(biāo)指示文本。
wait 此光標(biāo)指示程序正忙（通常是一只表或沙漏）。
help 此光標(biāo)指示可用的幫助（通常是一個(gè)問號或一個(gè)氣球）。
鼠標(biāo)事件改變css樣式、選擇器
我們在很多時(shí)候其實(shí)是需要在網(wǎng)頁中設(shè)置鼠標(biāo)效果的，有些是自動(dòng)生成的，比如一個(gè)link鏈接，那么鼠標(biāo)移上去自動(dòng)會(huì)變成一個(gè)手的樣子去點(diǎn)擊，有時(shí)候一個(gè)input輸入框，那么鼠標(biāo)就自動(dòng)變成一個(gè)英文大寫I的樣子，那么我們是否可以將更多對象設(shè)置成我們需要的樣子呢？這完全是可以的，接下來就看下效果吧
onClick：鼠標(biāo)單擊事件。（是指鼠標(biāo)按下，然后松開時(shí)產(chǎn)生。）
onDblClick：鼠標(biāo)雙擊事件。（是指鼠標(biāo)快速按下，松開，并再次按下時(shí)產(chǎn)生。）
onMouseDown：鼠標(biāo)按下事件。（鼠標(biāo)按下時(shí)即產(chǎn)生。）
onMouseUp：鼠標(biāo)釋放事件。（是指鼠標(biāo)從按下的狀態(tài)到彈起。）
onMouseMove：鼠標(biāo)移動(dòng)事件。（是指在特定元素上移動(dòng)鼠標(biāo)。）
onMouseOver：鼠標(biāo)經(jīng)過事件。（是指，當(dāng)指針從外界往元素上移動(dòng)時(shí)產(chǎn)生。）
onMouseOut：鼠標(biāo)離開事件。（是指鼠標(biāo)從特定元素上離開時(shí)產(chǎn)生。）
onLoad：載入事件。（當(dāng)圖象或頁面結(jié)束載入時(shí)產(chǎn)生。）
onUnload：卸載事件。（當(dāng)訪問者離開頁面時(shí)產(chǎn)生。）
onScroll：滾動(dòng)條滾動(dòng)事件。（當(dāng)訪問者使用卷軸上移或下移時(shí)產(chǎn)生。）
將這個(gè)自定義樣式應(yīng)用到圖片上，在瀏覽器中預(yù)覽到圖片變成了黑白，我們再定義一個(gè)樣式“.over”，這個(gè)樣式?jīng)]有任何內(nèi)容，是空樣式，樣式表代碼如下：
.over {}
.out {filter: Gray}
然后在圖片標(biāo)記（IMG）里加上“onMouseOver="this.className='over'" onMouseOut="this.className='out'"”，意思為當(dāng)鼠標(biāo)經(jīng)過時(shí)，圖片為over樣式，即彩色正常圖象；當(dāng)鼠標(biāo)離開時(shí)，圖片為out樣式，即黑白圖像。oMouseOver和onMouseOut是鼠標(biāo)事件，this.className=”…”表示當(dāng)前對象的class名 為…，注意大小寫不要寫錯(cuò)，JS對大小寫非常敏感。
這樣這個(gè)效果就完成了，保存后在瀏覽器里打開，圖象是黑白的，當(dāng)鼠標(biāo)移上去時(shí)，圖象變成彩色，鼠標(biāo)離開時(shí)，圖象又變回黑白。只要發(fā)揮你的想象，通過this.className方法還可以做出很多好看的鼠標(biāo)效果。
十字
文本光標(biāo)
等待
默認(rèn)
問號
左右箭頭
上下箭頭
系統(tǒng)自動(dòng)給出效果
系統(tǒng)自動(dòng)給出效果
:hover 選擇器用于選擇鼠標(biāo)指針浮動(dòng)在上面的元素。
提示： :hover 選擇器可用于所有元素，不只是鏈接。
提示： :link 選擇器設(shè)置指向未被訪問頁面的鏈接的樣式，:visited 選擇器用于設(shè)置指向已被訪問的頁面的鏈接，:active 選擇器用于活動(dòng)鏈接。
注釋： 在 CSS 定義中，:hover 必須位于 :link 和 :visited 之后（如果存在的話），這樣樣式才能生效。
如何利用CSS改變鼠標(biāo)的樣式
利用cursor設(shè)置或檢索在對象上移動(dòng)的鼠標(biāo)指針采用何種系統(tǒng)預(yù)定義的光標(biāo)形狀：
cursor屬性的屬性值分為
auto，crosshair，default，hand，move，help，wait，text，w-resize，s-resize，n-resize，e-resize，ne-resize，sw-resize，se-resize，nw-resize，pointer，url(url)
而我們最常用的cursor光標(biāo)有以下幾種
1）div{cursor:default?}默認(rèn)正常鼠標(biāo)指針
2）div{cursor:hand}和div{cursor:text}文本選擇效果
3）div{cursor:move}移動(dòng)選擇效果
4）div{cursor:pointer}手指形狀鏈接選擇效果
5）div{?cursor:url(url圖片地址)}設(shè)置對象為圖
本文名稱：css改變鼠標(biāo)樣式,css給元素添加鼠標(biāo)樣式
本文來源：http://www.ef60e0e.cn/article/dscdsgh.html
