源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
楼主: ttx9n

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

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 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",用时选择加载。
回复

使用道具 举报

0

主题

1万

回帖

68

积分

注册会员

Rank: 2

积分
68
发表于 2022-9-17 09:20:48 | 显示全部楼层
搞个免费的用用
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

120

积分

注册会员

Rank: 2

积分
120
发表于 2023-8-18 23:48:54 | 显示全部楼层
8888888888888888
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-8-29 19:00:05 | 显示全部楼层
哦哦哦哦哦哦哦哦哦
回复 支持 反对

使用道具 举报

3

主题

2万

回帖

163

积分

注册会员

Rank: 2

积分
163
发表于 2023-12-11 06:02:53 | 显示全部楼层
那三门,你们谁寂寞才快乐撒
TS人妖演出表演服务q3268336102电话13168842816
回复 支持 反对

使用道具 举报

4

主题

2万

回帖

107

积分

注册会员

Rank: 2

积分
107
发表于 2024-3-15 15:40:44 | 显示全部楼层
飞飞飞飞飞飞飞飞飞飞飞飞飞
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

87

积分

注册会员

Rank: 2

积分
87
发表于 2024-7-18 14:40:49 | 显示全部楼层
抽根烟,下来看看再说
回复 支持 反对

使用道具 举报

27

主题

2万

回帖

331

积分

中级会员

Rank: 3Rank: 3

积分
331
发表于 2024-8-6 23:19:49 | 显示全部楼层
哈哈哈哈哈哈哈
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

69

积分

注册会员

Rank: 2

积分
69
发表于 2024-8-29 05:10:27 | 显示全部楼层
终于找到了,我擦
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2024-9-10 21:34:08 | 显示全部楼层
管灌灌灌灌灌灌灌灌灌灌
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2025-2-5 10:42 , Processed in 0.068177 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表