在网页中，鼠标指针可以根据需要而发生形状上的各种变化。例如，移动到链接文字上时，会显示为手形；移到正文上时，显示为指针。通过一个简单实例演示如何通过CSS来改变鼠标的样式，使鼠标移到不同的元素上时，显示不同的形状。
新建一个HTML文档。执行“修改”/“页面属性”命令，弹出页面属性对话框。
单击“浏览”按钮选择背景图像。由于背景图像没有填满整个窗口，Dreamweaver会自动平铺（重复）背景图像，如图6-36所示。
下面使用CSS样式表禁用图像平铺。
执行“窗口”/“CSS样式”命令，打开“CSS样式”浮动面板。
图6-36 图像平铺效果
图6-37 禁用图像平铺效果
单击“CSS样式”面板上的“新建CSS规则”按钮，在弹出的“新建CSS规则”对话框的“选择器类型”下拉列表中选择“类（可应用于任何HTML元素）”，在“选择器名称”文本框中键入“.background”，在“规则定义”下拉列表中选择“仅限该文档”，然后单击“确定”按钮关闭对话框。
在“CSS样式定义”对话框的“分类”列表框中，选择“背景”选项。单击“浏览”按钮，选择图像文件。单击“重复”下拉列表框下拉箭头，选择“不重复”。然后单击“确定”按钮。
在文档窗口的状态栏中右击<body>标签，并从弹出的快捷菜单中选择“设置类”子菜单中的.background。应用样式后的效果如图6-37所示。
在文档窗口中输入如下内容：“鼠标效果”，并在属性面板中将这段文字设置为一级标题。然后在文档窗口中输入如下内容：“请把鼠标移到相应的位置查看效果。”(www.xing528.com)
选择“插入”/“布局对象”/“AP Div”命令，或单击“布局”插入面板上的“绘制AP Div”的图标，在文档窗口插入4个AP元素，在对应的属性设置面板中分别设置它们的“CSS-P元素名称”设置为apDiv1、apDiv2、apDiv3及apDiv4。
然后在4个AP元素中分别输入“手形”、“求助”、“等待”及“文本”，通过对应的属性设置面板设置字体大小为+3。输入内容后的文档显示如图6-38所示。
打开“CSS样式”面板。单击该面板顶部右边的三角按钮，从打开的下拉菜单中选择“新建CSS样式”命令，弹出“新建CSS样式”面板。
在该面板中选择“ID”选项，然后在“名称”文本框中输入#apDiv1，最后选中面板底部的“仅限该文档”选项。
本例选用ID选择器，所以输入选择器名称时，一定不要忘了元素名称前面的井号（#）。
图6-38 文档窗口显示效果
设置完成后单击按钮“确定”进行确认，并打开“CSS规则定义”对话框。单击对话框左侧“分类”列表框中的“扩展”选项，切换到扩展设置面板中。
打开“光标”选项后面的下拉列表框，选择hand，表示当鼠标移动到该文本上时变为手的形状。
通过同样的方法为其他3个AP元素设置对应的鼠标形状。
设置完成后单击“确定”按钮，进行确认并关闭该面板，返回到文档窗口。打开文件菜单，选择保存命令，将该文档保存。按F12键进行预览网页，当把鼠标移动到文字“手形”上时，鼠标将变成手的形状；当把鼠标移动到其他文本上时，鼠标将变为对应形状。
需要注意的是，有些CSS样式只有在预览时才能看到显示效果，例如本例中的CSS样式。
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
