2012-11-26 来源:网络
【实例介绍】
css控制鼠标指针
在许多网站上我们可以看到很有个性的鼠标指针(cursor),在网页设计中用css可以方便地实现这样个性鼠标指针的效果,该CSS属性就是cursor属性。一般而言,鼠标以斜向上的箭头显示,移到文本上时变为有头的竖线,移到超级链接上变为手形。但用CSS可以控制鼠标的显示效果,例如可使鼠标移到普通文本上时也显示成手形。
下面为cursor属性说明。
-----------------------------------------------------------------------------------------
值 功能说明
-----------------------------------------------------------------------------------------
url 需使用的自定义光标的URL
n-resize 此光标指示矩形框的边缘可被向上移动
default 默认光标(通常是一个箭头)
se-resize 此光标指示矩形框的边缘可被向下及向右移动
auto 默认。浏览器设置的光标
sw-rcsize 此光标指示矩形框的边缘可被向下及向左移象
crosshair 光标呈现为十字线
s-resize 此光标指示矩形框的边缘可被向下移动
pointer 光标呈现为指示链接的指针(一只手)
w-resizc 此光标指示矩形框的边缘可被向左移动
move 此光标指示某对象可被移动
wait 此光标指示程序正忙(通常是一只表或沙漏)
e-resize 此光标指示矩形框的边缘可被向右移动
help 此光标指示可用的帮助(通常是一个问号或一个一
ne-resize 此光标指示矩形框的边缘可被向上及向右移动
text 此光标指示文本
nw-resize 此光标指示矩形框的边缘可被向上及向左移动。
-----------------------------------------------------------------------------------------
【实例代码】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> .cursor1{cursor:hand} </style> </head> <body class="cursor1"> 显示你个性的鼠标指针 </body> </html>
【代码分析】
在代码中,加粗代码是将鼠标设置为手形,如图所示。
【素材及源码下载】
请点击:css控制鼠标指针 下载本实例相关素材及源码