网站维护：网页设计时如何用CSS样式表转变鼠标样式

　　平常我们移动鼠标到不同的处所时，当鼠标履行不同的功效时，当系统处于不同的状态时，都会使鼠标的外形产生变更。而在网页上往往只有当鼠标在超级链接上时才呈现一个手形，在其它处所似乎没有什么变更，同布满动感的网页显得不怎么和谐。实际上，用CSS可以方便地定义很多种鼠标外形。用本文先容的方法，可以在网页的作何处所设置鼠标的不同样式。

　　如何实现鼠标的不同样式？方法是：

　　在涂鸦板中写进：

　　其中tag是标签名，mouse_style就是鼠标样式，如hand/crosshair/text/wait等等。

　　具体在Dreamweaver中设置手形鼠标样式后果的制作步骤：

　　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〉

　　对于不是应用Dreamweaver的网友，直接把上述代码复制在〈head〉与〈/head〉之间，产生的后果雷同。

　　4、选择一段文本或图象，点一下CSS面板上的“.cursor1”就行了。按F12，把鼠标移到那段加载了转变鼠标样式CSS的处所，鼠标就会变为手形。对于不是应用Dreamweaver的网友，需把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"，用时选择加载。

【关闭窗口】