js css 自定义鼠标的样式

JavaScript078

js css 自定义鼠标的样式,第1张

<html>

<body>

<p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>

<span style="cursor:auto">

Auto</span><br />

<span style="cursor:crosshair">

Crosshair</span><br />

<span style="cursor:default">

Default</span><br />

<span style="cursor:pointer">

Pointer</span><br />

<span style="cursor:move">

Move</span><br />

<span style="cursor:e-resize">

e-resize</span><br />

<span style="cursor:ne-resize">

ne-resize</span><br />

<span style="cursor:nw-resize">

nw-resize</span><br />

<span style="cursor:n-resize">

n-resize</span><br />

<span style="cursor:se-resize">

se-resize</span><br />

<span style="cursor:sw-resize">

sw-resize</span><br />

<span style="cursor:s-resize">

s-resize</span><br />

<span style="cursor:w-resize">

w-resize</span><br />

<span style="cursor:text">

text</span><br />

<span style="cursor:wait">

wait</span><br />

<span style="cursor:help">

help</span>

</body>

</html>

css3的代码

设置url还可以自定义图片

① 如果要在整个document文档中使鼠标光标形状是n-size，可以给document注册mouseover和mousemove事件，并且设置它的样式为cursor：n-size；

②同样地，如果要在拖动某个div使鼠标光标样式为某个形状时，先给div盒子注册拖动事件，拖动事件ondrag，然后设置div的style.cursor = "某个形状样式属性值"

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

$("button#1").bind('click',function(){

    if($("body").css('cursor')=='crosshair'){

        ("body").css('cursor','default')

    }else{

        ("body").css('cursor','crosshair')

    }

})

然后你要将这个鼠标样式应用到哪一个元素上，就修改这个元素的cursor就ok了