<style>
div{width:100;height:50;float:left;border:1px solid red;margin:1px;}
</style>
<div style="cursor:auto">auto</div>
<div style="cursor:default">default</div>
<div style="cursor:pointer">pointer</div>
<div style="cursor:hand">hand</div>
<div style="cursor:wait">wait</div>
<div style="cursor:text">text</div>
<div style="cursor:vertical-text">vertical-text</div>
<div style="cursor:no-drop">no-drop</div>
<div style="cursor:not-allowed">not-allowed</div>
<div style="cursor:help">help</div>
<div style="cursor:all-scroll">all-scroll</div>
<div style="cursor:move">move</div>
<div style="cursor:crosshair">crosshair</div>
<div style="cursor:e-resize">e-resize</div>
<div style="cursor:n-resize">n-resize</div>
<div style="cursor:nw-resize">nw-resize</div>
<div style="cursor:w-resize">w-resize</div>
<div style="cursor:s-resize">s-resize </div>
<div style="cursor:se-resize">se-resize</div>
<div style="cursor:sw-resize">sw-resize</div>

cursor样式实例

效果如下图:

详细说明:

https://www.w3school.com.cn/jsref/prop_style_cursor.asp

css 光标的更多相关文章

  1. CSS光标cursor

    前面的话 在浏览器中,光标对于提供交互反馈很有用.通过在不同的场景中改变光标,就能赋予其不同的含义 定义 cursor光标 值: [<uri>,]*[auto | default | po ...

  2. CSS光标属性一览表

    光标类型 CSS 把你的光标放到相应文字上查看效果 要注意光标的实际效果依赖于用户的系统设置,与你在这里看到的效果并不一定一致. 十字准心 cursor: crosshair; 手 cursor: p ...

  3. 测开之路九十五:css进阶之光标和溢出内容处理

    光标样式:cursor 准备文字 css 溢出内容处理:overflow,默认溢出部分是显示 先把内容放到盒子里面 正常显示 不显示溢出内容 显示为滚动条 自动处理 css /* 光标样式 */p{ ...

  4. CSS active选择器与CSS hover选择器

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  5. 不可思议的纯CSS导航栏下划线跟随效果

    先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...

  6. [web建站] 优课急送《零基础快速学习建站》视频+课件【价值399元】

    [课程介绍]你想快速建一个网站出来吗?你想从什么都不懂到一两天出一个漂漂亮亮的站吗?你想完成领导交给你的任务找人建站吗?你想自己建站来创业吗?你想学会建站之后,利用给别人建站来赚钱吗?你想建一个跟某个 ...

  7. jQuery EasyUI API - Base - Draggable [原创汉化官方API]

    最近在学习jQuery EasyUI,发现中文的文档好少,部分文档不错但它是鸟语的,为了大家也为了自己学习吧,汉化做一下笔记. 有没有说清楚的,或者翻译不正确的地方还请大家谅解指出.. 由于工作时间原 ...

  8. jQuery UI API - 可拖拽小部件(Draggable Widget)(转)

    所属类别 交互(Interactions) 用法 描述:允许使用鼠标移动元素. 版本新增:1.0 依赖: UI 核心(UI Core) 部件库(Widget Factory) 鼠标交互(Mouse I ...

  9. EasyUI Draggable 可拖动

    通过 $.fn.draggable.defaults 重写默认的 defaults. 用法 通过标记创建可拖动(draggable)元素. <div id="dd" clas ...

随机推荐

  1. 阿里云Mysql导入大数据文件

    1.查询数据保存为CSV文件 select * from account into outfile '/root/account.csv' fields terminated by ',' enclo ...

  2. atlas笔记

    目录 环境 Mysql+Atlas配置 atlas:mysql-proxy扩展,mysql中间件,可以实现分表.分库(sharding版本).读写分离.数据库连接池等功能! Atlas类似于Twemp ...

  3. nginx日志分割及备份

    环境:centos7 nginx1.16.1 一.分割及备份的目的 nginx默认将日志信息写在一个文件中,时间一久日志文件中条目越来越多,文件越来越大,不方便查看,备份的时候也不需要备份重复的信息, ...

  4. 部署LNMP应用平台

    一.LNMP应用平台概述 1.概述:LNMP代表的就是:Linux系统下Nginx+MySQL+PHP这种网站服务器架构.Nginx是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/ ...

  5. 第一部分day1-变量、运算

    变量:为了存储程序运算过程中的一些中间 结果,为了方便日后调用常量:固定不变的量,字符大写 变量的命名规则 1.字母数字下划线组成2.不能以数字开头,不能含特殊字符和空格3.不能以保留字命名4.不能以 ...

  6. mysql基础知识之数据类型与约束

    一.约束 作用: 保证数据的完整性和一致性表的设计 1.not null 和 default not null 是放在最后用来约束 前面 数据类型的 (在原有基础上本来可以主键后面可以为空,但是一旦在 ...

  7. IComparable和IComparer接口

    C#中,自定义类型,支持比较和排序,需要实现IComparable接口.IComparable接口存在一个名为CompareTo()的方法,接收类型为object的参数表示被比较对象,返回整型值:1表 ...

  8. RedHat linux服务器对外开放指定端口

    为了能够远程访问这台机器上的MySQL,需要开放3306端口: [root@localhost ~]# service iptables status Redirecting to /bin/syst ...

  9. Mac-搭建Hadoop集群

    You have to work very hard to believe that you are really powerless. Mac-搭建Hadoop集群 我用到了:VMware Fusi ...

  10. 福州大学软件工程1916|W班 第10、11次作业成绩排名

    作业链接 项目Alpha冲刺(团队) 事后诸葛亮(团队) 评分细则 博客评分标准 本次作业包括现场Alpha答辩评分(映射总分为100分)+博客分(总分130分)+贡献度得分,其中博客分由以下部分组成 ...