巧妙运用CSS立刻改变鼠标的样式

互联网   发布时间：2008-10-17 19:27:05   作者：佚名   我要评论

用惯了Windows的人对各种各样的鼠标样式一定不会陌生。当鼠标移动到不同的地方时，当鼠标执行不同的功能时，当系统处于不同的状态时，都会使鼠标的形状发生变化。而在网页上往往只有当鼠标在超级链接上时才出现一个手形，在其它地方似乎没有什么变化，同充满动感的网页

用惯了Windows的人对各种各样的鼠标样式一定不会陌生。当鼠标移动到不同的地方时，当鼠标执行不同的功能时，当系统处于不同的状态时，都会使鼠标的形状发生变化。而在网页上往往只有当鼠标在超级链接上时才出现一个手形，在其它地方似乎没有什么变化，同充满动感的网页显得不怎么和谐。实际上，用CSS可以方便地定义许多种鼠标形状。用本文介绍的方法，可以在网页的作何地方设置鼠标的不同样式。

在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代码是这样的：

〈styletype="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"，用时选择加载。

相关文章

css实现的鼠标经过某对象时让其变成手状，下面整理了光标的各种样式，其中pointer, hand为手形光标2014-07-22

鼠标的形状主要有：手形、移动、正在执行、十字形等等，下面为大家介绍下如何修改鼠标的CSS样式2014-02-20

鼠标经过时一般都会有鼠标的图形样式，为了方便使用本文整理了十五种常见的鼠标经过样式，喜欢的朋友可以收集下2013-09-10

CSS中cursor属性的鼠标样式有哪些？本文整理了一些，可供大家使用，感兴趣的朋友也可以参考下2013-09-09

鼠标的显示样式可以在css里进行友好的控制，下面整理了一些鼠标的样式类型，感兴趣的朋友可以参考下，希望对大家学习css有所帮助2013-08-20

要用到鼠标样式效果，就顺便整理了下十五种CSS鼠标样式，小例子供大家使用啊，下面与大家分享下CSS鼠标样式语法及示例，有需求的朋友可以参考下，希望对大家有所帮助2013-08-13

巧合要用到鼠标样式效果，就顺便整理了下十五种CSS 鼠标样式，小例子供大家使用啊2013-03-27

一个俏皮可爱的CSS实现的信封留言样式，包含基本的留言内容，效果很不错,感兴趣的你可以参考下2013-02-22

取值: [ [ ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resi2009-04-08

这篇文章主要介绍了CSS更改鼠标为手状样式的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-07-20

最新评论