在网页中如何定义鼠标的样式

转载 2007年09月21日 11:40:00

在网页中如何定义鼠标的样式

作者:闪吧   类型:原创   来源:闪吧

  在网页中如何定义鼠标的样式
解决思路
用cursor属性可以实现,可选值及说明如表2.1.6.2所示。
表2.1.6.2 cursor属性的可选值
可选值说明
hand手型
crosshair十字型
text鼠标移动到水平文本上的样式
wait等待
default系统默认样式
help带问号的样式
e-resize向右的箭头
ne-resize向右上方的箭头
n-resize向上的箭头
nw-resize向左上方的箭头
w-resize向左的箭关
sw-resize向左下的箭头
s-resize向下的箭头
se-resize向右下方的箭头
auto系统自动应用的样式
move十字箭头,移动对象时的样式
pointer鼠标移上链接时的样式,同hand(需IE6+支持)
all-scroll中间一小圆点,上、下、左、右四个方向是箭头的样式,表示页面可以向任意方向滚动(需IE6+支持)
col-resize左右两个箭头,中间以两条垂线分开,表示项目/栏的大小可以在水平方向上改变(需IE6+支持)
no-drop左边为手型,右边为斜线穿过的小圆圈, 表示可拖动项目在当前鼠标位置不能放开.
not-allowed斜线穿过的小圆圈,表示所请求的动作不能被执行(需IE6+支持)
progress指针旁有沙漏标志,表示后台有程序在运行,用户与此页面的交互不受影响(需IE6+支持)
row-resize上下两个箭头,中间以两条水平线分开,表示项目/栏的大小可以在垂直方向上改变(需IE6+支持)
url(uri)指针由作者定义,使用自定义通用资源识别码,例如url(’mycursor.cur’)。.cir,.ani类型的指针是唯一被支持的指针类型。(需IE6+支持)
vertical-text可编辑的垂直文本样式,以一个水平翻转的I来表示(需IE6+支持)


具体步骤
    代码示例:
    
    <style>
    body{cursor:default}
    textarea{cursor:url(demo.cur)}
    </style>
    <span style="cursor:help">查看帮助</span>
    <textarea></textarea>

注意:
l         以cursor:url(url)方式定义的鼠标样式需要IE6+的支持
l         定义的光标效果会因为系统所应用的Theme(主题)的影响而尽相同。
提示:光标文件除了静态的.cur格式的之外,还有.ani格式动态光标文件。
特别提示
运行本例代码,鼠标移上查看帮助四个文字上面,光标的效果如图2.1.6.10所示。

图1.2  自定义的光标效果

特别说明


cursor属性用于设置鼠标移上对象时所显示的光标形状或光标文件,对应的脚本特性为cursor,可选参数见表2.1.6.2。 
   责任编辑:kissall    时间:2005年8月29日
 

网页制作中如何改变鼠标的形状!

STYLE>... BODY{...}{ cursor:url(鼠标地址); } --> STYLE>  
  • tolys
  • tolys
  • 2007年09月27日 10:00
  • 38061

怎么在网页中改变鼠标的箭头形状?

怎么在网页中改变鼠标的箭头形状? auto crosshair default hand move e-resize ne-resize nw-resize n-resize se-re...
  • cenlop
  • cenlop
  • 2004年08月21日 18:51
  • 2379

JSP中的鼠标样式

怎样改变网页中的鼠标样式? auto crosshair default hand move e-resize ne-resize nw-resize n-resize se-resize sw-r...
  • dainiao01
  • dainiao01
  • 2008年04月29日 08:47
  • 607

鼠标 not-allowed 样式,和 css3 point-events

鼠标 not-allowed 样式,和 css3 point-events
  • wsq926
  • wsq926
  • 2017年11月03日 15:04
  • 130

移动鼠标实现图片的缩放

效果图:代码:http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">http://www.w3.org/1999/xhtml">Modi...
  • rigger21
  • rigger21
  • 2007年08月10日 17:33
  • 545

鼠标的各种样式

将下面代码插入页面中 ,用浏览器打开观看即可! 
  • loehuang
  • loehuang
  • 2010年02月21日 17:19
  • 329

鼠标的样式

一般而言,鼠标以斜向上的箭头显示,移到文本上时变为有头的竖线,移到超级链接上变为手型。但用css可控制鼠标的显示效果,如可使鼠标移到普通文本上也显示成手型。  用css控制的语法如下: ...
  • u010157437
  • u010157437
  • 2014年02月27日 22:35
  • 266

在鼠标位置显示字母 java

public class MyPanel extends JPanel implements MouseMotionListener,KeyListener{ int x; int y; ...
  • yuge1hao
  • yuge1hao
  • 2014年04月08日 16:42
  • 382

控制鼠标的样式

把代码放到body 里面手形 十字 文本光标 等待 默认 问号 左右箭头 上下箭头 系统自动给出效果...
  • zorosuteng
  • zorosuteng
  • 2008年05月09日 11:38
  • 116

网页鼠标的样式表

CURSOR: url(http://webme.bokee.com/inc/mouse051.ani);  BODY {CURSOR:鼠标的URL;}A {CURSOR:hand} hand:是大家...
  • name_wangliang
  • name_wangliang
  • 2009年08月26日 09:41
  • 43
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:在网页中如何定义鼠标的样式
举报原因:
原因补充:

(最多只允许输入30个字)