js動態該表鼠標樣式,js自定義鼠標樣式

本文目錄一覽：

• 1、JS動態該表鼠標樣式，鼠標放在圖片上，鼠標指針變成放大鏡形狀
• 2、js css 自定義鼠標的樣式
• 3、javascript 改變鼠標樣式
• 4、JS 或者Jquery怎麼實現：點擊一個按鈕之後鼠標樣式改變，然後單擊一次之後變回正常形狀

JS動態該表鼠標樣式，鼠標放在圖片上，鼠標指針變成放大鏡形狀

可以使用css來控制

.class {

  cursor:url(‘路徑’),auto;

}

cursor是支持自定義圖標的

你只要定義該元素的樣式，給定路徑後，就可以加載。

不過要注意的是，考慮到IE的兼容性問題，最好使用ico或cur格式的文件，分辨率最好是32×32

js css 自定義鼠標的樣式

html

body

p請把鼠標移動到單詞上，可以看到鼠標指針發生變化：/p

span style=”cursor:auto”

Auto/spanbr /

span style=”cursor:crosshair”

Crosshair/spanbr /

span style=”cursor:default”

Default/spanbr /

span style=”cursor:pointer”

Pointer/spanbr /

span style=”cursor:move”

Move/spanbr /

span style=”cursor:e-resize”

e-resize/spanbr /

span style=”cursor:ne-resize”

ne-resize/spanbr /

span style=”cursor:nw-resize”

nw-resize/spanbr /

span style=”cursor:n-resize”

n-resize/spanbr /

span style=”cursor:se-resize”

se-resize/spanbr /

span style=”cursor:sw-resize”

sw-resize/spanbr /

span style=”cursor:s-resize”

s-resize/spanbr /

span style=”cursor:w-resize”

w-resize/spanbr /

span style=”cursor:text”

text/spanbr /

span style=”cursor:wait”

wait/spanbr /

span style=”cursor:help”

help/span

/body

/html

css3的代碼

設置url還可以自定義圖片

javascript 改變鼠標樣式

不需要js，使用css就可以實現，定義單元格的樣式如下：

td style=”cursor:hand”…/td

如果必須用js實現的話，可以給單元格添加mouseover和mouseout事件，然後使用

cellid.style.cursor = “hand”; 設置為手型

和

cellid.style.cursor = “default”; 恢復默認

cellid是單元格的id

JS 或者Jquery怎麼實現：點擊一個按鈕之後鼠標樣式改變，然後單擊一次之後變回正常形狀

直接修改元素的cursor屬性呀！例如你要修改body的cursor屬性

$(“button#1”).bind(‘click’,function(){

    if($(“body”).css(‘cursor’)==’crosshair’){

        (“body”).css(‘cursor’,’default’);

    }else{

        (“body”).css(‘cursor’,’crosshair’);

    }

})

然後你要將這個鼠標樣式應用到哪一個元素上，就修改這個元素的cursor就ok了