中华网通行证
用户名 密码
  科技动态 硬件广场 下载基地 网络教室 网络冲浪 科学博览 移动时代 手机上网 桌面壁纸 科技商情  

巧用CSS改变鼠标的样式 
冯永曜  黄山村夫  

  用惯了Windows的人对各种各样的鼠标样式一定不会陌生。当鼠标移动到不同的地方时,当鼠标执行不同的功能时,当系统处于不同的状态时,都会使鼠标的形状发生变化。而在网页上往往只有当鼠标在超级链接上时才出现一个手形,在其它地方似乎没有什么变化。这同充满动感的网页显得不怎么和谐。实际上,用CSS可以方便地定义许多种鼠标形状。用本文介绍的方法,可以在网页的作何地方设置鼠标的不同样式。
  在Dreamweaver3中设置手形鼠标样式效果的制作步骤:
  1、按F7(或点击快速启动栏里那个象“八卦图”似的图标),调出CSS面板,选择“none”,再点击面板下部的编辑图标,在弹出的“Edit Style Sheet”对话框上按“New”按钮,在弹出的“New Style”对话框中选择“Make Custom Style (class)”后,在下面的“Name”输入框中输入“.cursor1”(也就是给要定义的class取个名字,注意前面那个小点不要漏了),按OK,立即弹出“Style Definition for .cursor1”对话框(如下图所示),这时就可定义CSS的“.cursor1”了。


  2、在“Style Definition for .cursor1”对话框左边的选择窗口中选择“Extensions”,在右边的面板上定义(也是选择)“Cursor”属性,本例是要求鼠标的形状变为手形,所以点击那个三角形按钮,在拉出的鼠标样式列表中选择“hand”,如上图所示。
  3、按OK按钮返回“Edit Style Sheet”对话框,按“Done”按钮,CSS就做好了。在网页源代码的〈head〉 与〈/head〉之间见到的CSS代码是这样的:
〈style type="text/css"〉
〈!--
.cursor1 { cursor: hand}
--〉
〈/style〉
  对于不是使用Dreamweaver3的网友,直接把上述代码复制在〈head〉与〈/head〉之间,产生的效果相同。
  4、选择一段文本或图象,点一下CSS面板上的“.cursor1”就行了。按F12,把鼠标移到那段加载了改变鼠标样式CSS的地方,鼠标就会变为手形。对于不是使用Dreamweaver3的网友,需把class="cursor"加到网页的源代码中去才行。
  若要把鼠标改变成其它形状,只要在第二步中定义“cursor”属性时选择不同的样式就行了。各属性值的含义如下:
crosshair:精确定位“十”字形; text:文本“I”形; wait:等待,“沙漏”形;default:默认指针; help:帮助,带尾箭头; e-resize:箭头朝右方; ne-resize:箭头朝右上方; n-resize:箭头朝上方; nw-resize:箭头朝左上方; w-resize:箭头朝左方; sw-resize:箭头朝左下方; s-resize:箭头朝下方; se-resize箭头朝右下方; auto:自动,鼠标按照默认的状态根据页面上的元素自行改变样式。
  了解了上述属性值的含义,鼠标的形状就在你的掌握之中了,需要让鼠标在那里变为什么形状,只要重复上面的操作就行了。要注意的是:一次只能定义一种鼠标样式,若在一个页面上使用多种样式的鼠标图形,要定义多个“class",用时选择加载。


 赛迪网 


 

 
更多本栏目内容
??Windows 2000系统安全设置攻略
??Dreamweaver编写CSS需要掌握的技巧
??使用Flash MX过程中的3个小技巧
??拖IE9网站图标到Win7任务栏 精彩好礼任你拿
??跨平台浏览器齐发力 傲游多平台小露峥嵘
??给瑞星添加移动存储自动杀毒功能
??美图秀秀绑定酷盘 靓照分享最轻松
金山网络七款软件齐升级 炫丽界面贺新春
??提升网站流量和权重 百度热榜排第一
??穿越者病毒一周增三倍 金山毒霸率先查杀

本站检索



中华网推荐

·国家级治脑病新药思维源
·中藏药治疗脑病新突破
·治类风湿,强直性脊柱炎
·养肾·痛风·长寿
·肝病泌尿脑萎缩新药介绍
·强直性脊柱炎康复乐园
·让中医辩证不孕不育
·国医治股骨头坏死一绝
·乙肝为何久治不愈?
·二千元垄断批发做老板
·中医中药专治前列腺
·治牛皮癣白癜风已成现实
·专治痛风病的白衣天使
·不孕不育的杏林奇葩
·专卖店零售管理系统





   

网络教室编辑信箱