css 鼠标提示样式预览表[转]

语法:

cursor : auto | all-scroll | col-resizecrosshair | default | hand | move | help | no-drop | not-allowed | pointer | progress | row-resize | text | vertical-text | wait | *-resize | url ( url )

取值:

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; }


把你的光标放到相应文字上鼠标显示效果


注意光标的实际效果依赖于用户的系统设置,与你在这里看到的效果不一定完全一致。


cursor: auto;



自动


The browser sets a cursor

浏览器设置一个游标


cursor:all-scroll;


上下左右任何方向滚动


IE6.0有上下左右四个箭头,中间有一个圆点的光标。用于标示页面可以向上下左右任何方向滚动。


cursor: crosshair;



十字准心


The cursor render as a crosshair

游标表现为十字准线


cursor: pointer;

cursor: hand;

写两个是为了照顾IE5,它只认hand。




The cursor render as a pointer (a hand) that indicates a link

游标以暗示(手指)的形式来表明有一个连接


cursor: wait;



等待/沙漏


The cursor indicates that the program is busy (often a watch or an hourglass)

游标暗示当前程序正忙(一般为一块表或是一个沙漏)


cursor: help;



帮助


The cursor indicates that help is available (often a question mark or a balloon)

游标暗示当前位置可得到帮助(一般为问号或是气球)


cursor: no-drop;



无法释放


cursor: no-drop;


cursor: text;



文字/编辑


The cursor indicates text

游标暗示当前所处位置为文字内容


cursor: move;



可移动对象


The cursor indicates something that should be moved

游标暗示一些东西应该被移动


cursor:vertical-text


可编辑的垂直文本的光标


IE6.0用于标示可编辑的垂直文本的光标。通常是大写字母 I 旋转90度的形状。


cursor: n-resize;



向上改变大小(North)


The cursor indicates that an edge of a box is to be moved up (north)

边缘可向上移动(北)


cursor: s-resize;



向下改变大小(South)


The cursor indicates that an edge of a box is to be moved down (south)

边缘可向下方移动(南)


cursor: e-resize;



向右改变大小(East)


The cursor indicates that an edge of a box is to be moved right (east)

box边缘可向右(东)边移动


cursor: w-resize;



向左改变大小(West)


The cursor indicates that an edge of a box is to be moved left (west)

边缘可向左移动(西)


cursor: ne-resize;



向上右改变大小(North East)


The cursor indicates that an edge of a box is to be moved up and right (north/east)

游标暗示box的边缘可向右上方移动(东北方向)


cursor: nw-resize;



向上左改变大小(North West)


The cursor indicates that an edge of a box is to be moved up and left (north/west)

边缘可向左上方移动(西北)


cursor: se-resize;



向下右改变大小(South East)


The cursor indicates that an edge of a box is to be moved down and right (south/east)

边缘可向右下方移动(东南)


cursor: sw-resize;



向下左改变大小(South West)


The cursor indicates that an edge of a box is to be moved down and left (south/west)

边缘可向左下方移动(西南)


cursor:col-resize;


项目可被水平改变尺寸


IE6.0有左右两个箭头,中间由竖线分隔开的光标。用于标示项目或标题栏可以被水平改变尺寸。


cursor:row-resize;


项目可被垂直改变尺寸


IE6.0有上下两个箭头,中间由横线分隔开的光标。用于标示项目或标题栏可以被垂直改变尺寸。


cursor:not-allowed;



禁止


cursor:not-allowed;


cursor: progress;



处理中


cursor: progress;


cursor: default;



系统默认


The default cursor (often an arrow)

默认的游标状态(通常为一个箭头)


cursor: url(‘ # ‘);

# = 光标文件地址      (注意文件格式必须为:.cur 或 .ani)。



用户自定义(可用动画)


The url of a custom cursor to be used.

自定义游标的url位置

Note: Always define a generic cursor at the end of the list in case none of the url-defined cursors can be used

注意:在定义完自定义的游标之后在末尾加上一般性的游标,以防那些url所定义的游标不能使用

但要说明一点:cursor: hand不符合标准,所以如果希望是手型的话还是用cursor: pointer比较好。

原文地址:http://www.ddhbb.com/post/775.html

时间: 2024-10-17 19:44:20

css 鼠标提示样式预览表[转]的相关文章

基于9款CSS3鼠标悬停相册预览特效

基于9款CSS3鼠标悬停相册预览特效里面包含九款不同方式的相册展开特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="albums"> <div class="albums-inner"> <div class="albums-tab"> <div class="albums-tab-thumb sim-anim-1"> <

jQuery实现鼠标经过图片预览大图效果

jQuery:是一种客户端的技术,它的诞生的理由是:write less,do more(写更少的代码,做更多的事情). 因此,我们可以借助jQuery来实现一些很酷炫的效果,相比于javaScript来说,同样的效果,但是很简单的代码.jQuery中的核心知识点就是选择器的使用,选择器的内容我会在之后的博客中总结,希望大家去看下,学好了选择我器,相当于完全掌握了jQuery. 这篇博文是实现怎么通过jQuery实现我们在购物网站中常见的:当鼠标经过了图片数,图片会放大进行预览大图.接下来我就粘

【DEMO】CSS+JS实现带预览缩略图幻灯片

大二暑假某天顿悟要走的前端之路,于是在网上搜罗了一箩筐的前端入门攻略,总结出JS作为重中之重,抱着系统学习.想象能学成个人技能的心态就一句句代码跟着书上码的方式真看完<Javascript DOM编程艺术><高级程序设计JvaScript><锋利的jQuery>三本比较大热的JS的书,就是刚看完书的那段时间忙着期末考和实训,也未来得及好好梳理并实践.今天想来,也不觉得大三上整整一学期泡在图书馆的时候有多难熬,毕竟那时候生活属于一片混乱闹心,学无所成倒不至于,就是未能在那

iframe和HTML5 blob实现JS,CSS,HTML直接当前页预览 (转载)

所以此技术只适用于对兼容性没有严格要求的一些项目. 三.结束语 其实很多效果,我们直接在结束当前页面的window上下文预览也没什么,但是有一些效果就不行,例如,预览针对响应式布局的media屏幕宽度查询下的效果,必须是真实的窗体宽度才会触发CSS查询语句的执行,此时,只能在<iframe>中预览,我们只要把<iframe>元素宽度设置到我们需要的大小就可以了,例如,需要预览类似如下CSS代码效果: @media screen and (max-width:480px) { img

CSS鼠标小样式随笔!!!!

CSS控制鼠标样式  "cursor" 1.auto        : 正常光标 2.default    : 标准箭头 3.pointer    : 手型光标  (据说IE有兼容问题,单在IE 8.0中未发现) 4.wait         : 等待光标 5.text : 编辑光标 6.vertical-text   : 水平编辑光标 7.no-drop         : 无效光标 8.not-allowed   : 无效光标 (和no-drop 光标一样) 9.help : 帮助

RunJS个人使用推荐(好用的JS、css实时预览、编辑、管理等功能)

RunJS,在线编写.展示html.js.css代码,拥有实时预览.分享.Fork.代码高亮.自动完成等多项特性,提供文件上传.多种登录方式. 地址:http://runjs.cn/

jquery 预览提交的表单

预览表单,查看后确认提交或者返回重填 演示 XML/HTML Code <form class="mform" id="myform" method="POST" id="myform" action=""> <fieldset> <legend>Registeration</legend> <table cellspacing="0"

自己动手开发更好用的markdown编辑器-04(预览功能)

这里文章都是从个人的github博客直接复制过来的,排版可能有点乱. 原始地址 http://benq.im/2015/04/25/hexomd-04/ 程序打包 文章目录 1. 打开新窗口 2. 预览功能 3. 优化体验 3.1. 滚动条随动 3.2. 样式美化 3.3. 代码块高亮 3.4. 关闭主程序前先自动关闭预览窗口 4. 总结 5. 附件 上一篇我们实现了系统模块的一些功能,对angular的使用更深入了一点. 今天这篇我们要实现实时预览的功能,将学习到如何使用nw.js打开额外新窗

js 实现的excel解析和预览

<link href="${rc.contextPath}/res/adminlte/plugins/bootstrap-fileinput/css/fileinput.min.css" rel="stylesheet"><link href="${rc.contextPath}/res/adminlte/plugins/bootstrap-fileinput/css/fileinput-rtl.min.css" rel=&qu