css控制鼠标指针

2012/11/26 10:55:59作者：佚名来源：网络

移动端

【实例介绍】

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>

【代码分析】

在代码中，加粗代码是将鼠标设置为手形，如图所示。

控制鼠标指针