cursor

1.定义和用法

cursor 属性规定要显示的光标的类型（形状）。

该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状（不过 CSS2.1 没有定义由哪个边界确定这个范围）。

2.属性

url

需使用的自定义光标的 URL。

注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default 默认光标（通常是一个箭头）
auto 默认。浏览器设置的光标。
crosshair 光标呈现为十字线。
pointer 光标呈现为指示链接的指针（一只手）
move 此光标指示某对象可被移动。
e-resize 此光标指示矩形框的边缘可被向右（东）移动。
ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize 此光标指示矩形框的边缘可被向上（北）移动。
se-resize 此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize 此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize 此光标指示矩形框的边缘可被向下移动（南）。
w-resize 此光标指示矩形框的边缘可被向左移动（西）。
text 此光标指示文本。
wait 此光标指示程序正忙（通常是一只表或沙漏）。
help 此光标指示可用的帮助（通常是一个问号或一个气球）。

3.支持的浏览器

所有主流浏览器都支持 cursor 属性。

注释：Opera 9.3 和 Safari 3 不支持 url 值。

注释：任何版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

4.html代码

<html>

    <body>

        <p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>

        <span style="cursor:auto">Auto</span><br />

        <span style="cursor:crosshair">Crosshair</span><br />

        <span style="cursor:default">Default</span><br />

        <span style="cursor:pointer">Pointer</span><br />

        <span style="cursor:move">Move</span><br />

        <span style="cursor:e-resize">e-resize</span><br />

        <span style="cursor:ne-resize">ne-resize</span><br />

        <span style="cursor:nw-resize">nw-resize</span><br />

        <span style="cursor:n-resize">n-resize</span><br />

        <span style="cursor:se-resize">se-resize</span><br />

        <span style="cursor:sw-resize">sw-resize</span><br />

        <span style="cursor:s-resize">s-resize</span><br />

        <span style="cursor:w-resize">w-resize</span><br />

        <span style="cursor:text">text</span><br />

        <span style="cursor:wait">wait</span><br />

        <span style="cursor:help">help</span>

    </body>

</html>

CSS cursor 属性的更多相关文章

  1. 【CSS】按钮的禁用与可用 CSS Cursor 属性

    禁用时的样式 可用时的样式 样式很简单,禁用就设置为灰色,可用就设置为红色,今天这个不是重点,重点的是,光标的样子 一般,禁用时候,光标移动到按钮的上方,光标如下 而在启用按钮的时候,光标移动到按钮上 ...

  2. CSS cursor 属性--css html 鼠标手型,鼠标形状,鼠标效果,样式

    css鼠标手型cursor中hand与pointer Example:CSS鼠标手型效果 <a href="#" style="cursor:hand"& ...

  3. CSS：CSS cursor 属性

    ylbtech-CSS:CSS cursor 属性 1.返回顶部 1. 实例 一些不同的光标: span.crosshair {cursor:crosshair;} span.help {cursor ...

  4. 光标属性CSS cursor 属性

    CSS cursor 属性 CSS cursor属性,以前不知道,如果以后用到自己看的 <html> <body> <p>请把鼠标移动到单词上,可以看到鼠标指针发生 ...

  5. css cursor属性-显示的光标的类型(形状)的用法和定义

    在网页布局的时候,在特定的地方,光标形状各有区别.这个时候,就需要用到css的cursor属性.根据自身需要选择设置鼠标指针样式. 定义和用法 cursor 属性规定要显示的光标的类型(形状). 该属 ...

  6. CSS cursor属性

    介绍: 该属性规定要显示的光标的类型,该属性定义了鼠标指针放在一个元素边界范围之内的时候所用的光标的形状. 常用的属性值: default:默认光标 auto:浏览器默认的光标 pointer:光标呈 ...

  7. css cursor属性详解

    cursor                       // 鼠标移上去的鼠标状态 属性值有以下: (可以将鼠标移上以下属性值看看效果) auto crosshair default pointer ...

  8. CSS cursor 属性改变鼠标的样式

    可能的值 值 描述 url 需使用的自定义光标的 URL. 注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标. default 默认光标(通常是一个箭头) auto 默 ...

  9. CSS之cursor属性

    CSS之cursor属性 今天学习了CSS的cursor属性,第一篇博客就用来总结它吧. cursor属性用于控制光标的显示样式,可取的值有这些: cursor:url()*|{auto|defaul ...

随机推荐

  1. 每日英语：The First Day On A Job Is Tough Work

    Why is the first day on the job often the worst? New employees tend to be greeted with stacks of ben ...

  2. FreeRTOS 定时器组

    以下转载自安富莱电子: http://forum.armfly.com/forum.php 本章节为大家讲解 FreeRTOS 支持的定时器组,或者叫软件定时器,又或者叫用户定时器均可.软件定时器的功 ...

  3. CSS学习笔记（10）--nth-child和nth-of-type

    CSS3 :nth-child() 选择器 规定属于其父元素的第二个子元素的每个 p 的背景色: p:nth-child(2) CSS3 :nth-of-type() 选择器 规定属于其父元素的第二个 ...

  4. Android应用双击返回键退出

    @Override public void onBackPressed() { // TODO 退出提示 if (System.currentTimeMillis() - mExitTime > ...

  5. kettle两表内链接的查询结果与sql语句的查询结果不符合?

    1.教师表输入 2.学生表 查 3.学生表中查出的教师id进行排序 5.教师表中查出的同样也对教师的id进行排序 6.进行左连接 总结: 进行连接的时候的关键是同样对教师的id进行先排序

  6. Hadoop、Pig、Hive、NOSQL 学习资源收集

    转自:http://www.cnblogs.com/zzjhn/p/3855566.html (一)hadoop 相关安装部署 1.hadoop在windows cygwin下的部署: http:// ...

  7. 正向工程、逆向工程与MDA

    正向工程.逆向工程与MDA 正向工程:从UML图形生成代码: 逆向工程:从代码和成UML图形: //不要依赖于正向或逆向工程,仅是一种辅助手段.画图的目的不是为了生成代码:而写代码的目的也不是为了生成 ...

  8. linux -- 查看ip,路由,dns

    查看ip地址:ifconfig 查看gateway:route 查看dns:nm-tool

  9. 敏捷开发Scrum学习

    官方:http://baike.baidu.com/link?url=VGFzdJpuHX3g90kIX6l1QABWMmBNyf30sTGuEcJ6OJVMq0Cot1G9Imbu1gls-xpI6 ...

  10. shell脚本学习总结11--脚本调试

    参数: -n    不执行脚本,仅检查语法是否错误 -v    将脚本内容输出到屏幕上,然后执行脚本 -x   执行脚本,并将内容输出到屏幕 -n [root@new sbin]# sh -n deb ...