修改鼠标指针样式

在编写html时,有时我们需要修改鼠标指针的样式,比较形象的有qq农场的指针样式,如果我们自定义也可以实现该效果。大家可以通过修改css样式cursor来实现。

cursor取值:

auto :  默认值。浏览器根据当前情况自动确定鼠标光标类型。
all-scroll :  IE6.0 有上下左右四个箭头,中间有一个圆点的光标。用于标示页面可以向上下左右任何方向滚动。
col-resize :  IE6.0 有左右两个箭头,中间由竖线分隔开的光标。用于标示项目或标题栏可以被水平改变尺寸。
crosshair :  简单的十字线光标。
default :  客户端平台的默认光标。通常是一个箭头。
hand :  竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
move :  十字箭头光标。用于标示对象可被移动。
help :  带有问号标记的箭头。用于标示有帮助信息存在。
no-drop :  IE6.0 带有一个被斜线贯穿的圆圈的手形光标。用于标示被拖起的对象不允许在光标的当前位置被放下。
not-allowed :  IE6.0 禁止标记(一个被斜线贯穿的圆圈)光标。用于标示请求的操作不允许被执行。
pointer :  IE6.0 hand 一样。竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
progress :  IE6.0 带有沙漏标记的箭头光标。用于标示一个进程正在后台运行。
row-resize :  IE6.0 有上下两个箭头,中间由横线分隔开的光标。用于标示项目或标题栏可以被垂直改变尺寸。
text :  用于标示可编辑的水平文本的光标。通常是大写字母 I 的形状。
vertical-text :  IE6.0 用于标示可编辑的垂直文本的光标。通常是大写字母 I 旋转90度的形状。
wait :  用于标示程序忙用户需要等待的光标。通常是沙漏或手表的形状。
*-resize :  用于标示对象可被改变尺寸方向的箭头光标。w-resize | s-resize | n-resize |
e-resize | ne-resize | sw-resize | se-resize |
nw-resize
url ( url ) :  IE6.0 用户自定义光标。使用绝对或相对 url 地址指定光标文件(后缀为 .cur 或者 .ani )。

说明:

设置或检索在对象上移动的鼠标指针采用的光标形状。
此属性的值可以是多个,其间用逗号分隔。假如第一个值不可以被客户端系统理解或所指定的光标无法找到及显示,则第二个值将被尝试使用。依此类推。假如全部值都不可用的话,则此属性不会发生作用。光标不会被改变。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为cursor。

示例:

p { cursor: text; }
a { cursor: pointer;
}
body { cursor:
url("mycursor.gif"), url("images/cursors/footcursor.jpg"), default; }

时间: 2024-10-11 17:04:23

修改鼠标指针样式的相关文章

css Cursor:url()自定义鼠标指针样式为图片

css自定义鼠标指针样式为图片Cursor:url()的使用,今天在项目中,要用到自定义鼠标样式,格式: css:{cursor:url('绝对路径的图片(格式:cur,ico)'),-moz-zoom-out;}//FF下面 css:{cursor:url('绝对路径'),auto;}//IE,FF,chrome浏览器都可以 前面url是自定义鼠标格式,图像的绝对路径地址,后面的参数是css标准的cursor样式,(IE下面可以不需要) 图标的格式根据不同的浏览器来分:IE支持cur,ani,

电脑鼠标指针样式更改

电脑鼠标指针样式更改 前言: 今天在办公室,看到坐在隔壁的吴老师的电脑,发现她的桌面的鼠标指针是动态的, 不像平时看到的呆呆的那种鼠标指针,出于好奇,易安就偷了她的电脑嘿嘿嘿~ 爱美之心人皆有之,其实大多数人都会的啦,但是写出来给一些不会的人看吧,别忘了关注我吖 步骤: 一.    下载好指针文件,易安已经帮你下好款比较美观的鼠标指针文件啦~(需要的可以关注公众号获取哦) 二.    复制文件(也可以复制文件夹哦) 三.    打开我们的系统盘(一般都是C盘啦~) 我的系统盘是C盘,所以这里打开

CSS自定义鼠标指针样式

原文链接: http://davidwalsh.name/css-custom-cursorDemo地址: http://davidwalsh.name/demo/css-custom-cursor.php原文日期: 2014-09-16翻译日期: 2014-09-17翻译人员: 铁锚 还记得Web 1.0时代的那些苦逼岁月吗? 你想尽一切办法来优化你的网站. 还要饱受IE6惨无人道的虐待,举个栗子, IE中那些害死人不偿命的滚动条, 我一直记得第三方类库 CometCursor. CometC

css cursor鼠标指针光标样式default pointer hand url

我们在DIV CSS布局时候,我们会遇到对对象内鼠标指针光标进行控制,比如鼠标经过指针变为手指形状等样式,接下来我们介绍鼠标指针样式cursor控制.系统默认鼠标指针样式外,可以通过CSS设置图片为鼠标指针,常见有些网站鼠标指针是各种各样小图片样式,当然这个是通过css cursor设置鼠标样式. 详见网站介绍:http://www.divcss5.com/rumen/r427.shtml css cursor鼠标指针光标样式default pointer hand url,布布扣,bubuko

CSS鼠标指针cursor样式

参考来源:W3SCHOOL 有时我们需要在CSS布局时设定特定的鼠标指针样式,这时可以通过设定cursor来实现: url: 需使用的自定义光标的 URL. 注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标; default: 默认光标(通常是一个箭头); auto: 默认.浏览器设置的光标; crosshair: 光标呈现为十字线; pointer: 光标呈现为指示链接的指针(一只手); move: 此光标指示某对象可被移动; e-resize: 此光标指示矩形

jQ禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片、页面样式切换、所有列等高、动态控制页面字体大小、获得鼠标指针的X值Y值、验证元素是否为空、替换元素、延迟加载、验证元素是否存在于Jquery集合中、使DIV可点击、克隆对象、使元素居中、计算元素个数、使用Google主机上的Jquery类库、禁用Jquery效果、解决Jquery类库与其他Javascript类库冲突

1. 禁止右键点击 代码如下: $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); }); 2. 隐藏搜索文本框文字 代码如下: $(document).ready(function() { $("input.text1").val("Enter your search text here"); textFill($

【css】cursor鼠标指针光标样式知识整理

在前端开发中,我们经常需要对对象鼠标指针光标进行控制,比如鼠标经过超链接时变成手指形状.在这里整理一下cursor鼠标指针光标样式的知识,记录与方便以后查找. 1.常用cursor光标 1 div( cursor:default;} //默认正常鼠标指针 2 div( hand;}和div( cursor:text;} //文本选择效果 3 div( cursor:move;} //移动选择效果 4 div( cursor:pointer;} //手指形状 5 div( cursor:url("

CSS中cursor 鼠标指针光标样式(形状)

在前端开发中,我们经常需要对对象鼠标指针光标进行控制,比如鼠标经过超链接时变成手指形状.在这里整理一下cursor鼠标指针光标样式的知识,记录与方便以后查找. 常用cursor光标 url 需使用的自定义光标的 URL. 注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标. default 默认光标(通常是一个箭头)auto 默认.浏览器设置的光标.crosshair 光标呈现为十字线.pointer 光标呈现为指示链接的指针(一只手)move 此光标指示某对象可被

CSS样式:cursor -----定义鼠标指针

定义和用法 cursor 属性规定要显示的光标的类型(形状). 该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状(不过 CSS2.1 没有定义由哪个边界确定这个范围). 可能的值: demo: <html> <head>     <style type="text/css">        span{               line-height: 30px;             }     </style>  <