网站首页/网页设计列表/内容

css控制鼠标指针

网页设计2023-06-11阅读
网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。

【实例介绍】

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

 


网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。

……

相关阅读