CSS一些有趣的东西

w3cschool摘录，供自己学习用。

css cursor属性

定义和用法

cursor 属性规定要显示的光标的类型（形状）。

实例

一些不同的光标：

< 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 >

通过HTML DOM course属性也可以实现这个效果：

语法：

Object.style.cursor=cursortype

实例

本例改变指针：

< html >
< head >
< script type ="text/javascript" >
function changeCursor()
{
document.body.style.cursor = " crosshair " ;
document.getElementById( " p1 " ).style.cursor = " text " ;
}
</ script >
</ head >
< body >

< p id ="p1" > This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. </ p >

< input type ="button" onclick ="changeCursor()"
value ="Change cursor" />

</ body >
</ html >

转载于:https://www.cnblogs.com/xinyebabao/archive/2011/06/22/2034932.html