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. vss安装及服务器端、客户端配置图文教程

    安装VSS 一.双击setup. 之后点完成.就安装完了! 服务器端VSS配置 一.选择开始——所有程序——打开 一直下一步  到完成 二.然后再打开 说明:把这个enable rights and  ...

  2. oracle db_*和v$*表

    dba_开头    dba_users     数据库用户信息    dba_segments  表段信息    dba_extents    数据区信息 dba_objects 数据库对象信息    ...

  3. python学习笔记（3）--IDLE双击运行后暂停

    本来想找一个python的IDE什么的,用过pycharm,vs装python插件,软件都太大了,习惯了用sublime写html,js这样的简直受不了. 一直坚持用着python自带的IDLE,不过 ...

  4. Python操作Word：常用对象介绍

    前面已经介绍过了试用win32com类库来进行Word开发,系列文章<Python操作Word>是继承了前面的文章,所以,你应该先查看前面的文章,其实只有两篇,文章地址列在最下面的参考资料 ...

  5. 修复安卓的bug

    一直不明白listview中的复用,为什么会出现,项目多了.点击同一行的按钮,操作的不是指定行的对象. 仔细研读了代码,突然明白了.因为复用了,导致了position改变了. 伪码 if(conver ...

  6. Bus error (core dumped) 我重启了下superviser 资源cpu占用高

    python policy.py Bus error (core dumped) 我重启了下superviser

  7. C语言 百炼成钢21

    //题目57:编写一个业务函数,实现字符串(前后各有三个空格,单词前后也均有空格) //" i am student, you are teacher " , //各个单词首字符大 ...

  8. MySQL Python教程（2）

    mysql官网关于python的API是最经典的学习材料,相信对于所有函数浏览一遍以后,Mysql数据库用起来一定得心应手. 首先看一下Connector/Python API包含哪些类和模块. Mo ...

  9. Classification / Recognition

    转载 https://handong1587.github.io/deep_learning/2015/10/09/recognition.html#facenet Classification / ...

  10. 第二百六十节，Tornado框架-内置模板方法

    Tornado框架-内置模板方法 直接在html文件使用,不需要传值 Tornado默认提供的这些功能其实本质上就是 UIMethod 和 UIModule,也就是Tornado框架定义好的html文 ...