软件学堂

网游分类软件分类

css控制鼠标指针

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控制鼠标指针 下载本实例相关素材及源码

 

上一篇:css创建按钮式超链接
下一篇:css列表符号类型list-style-type

相关文章