<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. OpenSSL 安装 (Linux系统)

    OpenSSL 编译安装 操作系统:CentOS 7 OpenSSL Version: openssl-1.1.1d.tar.gz OpenSSL下载地址为:https://www.openssl.o ...

  2. Flask拾遗总汇1

    目录 1.flask的路由分发方式 2.请求响应相关 3.flask配置文件拾遗(config) 4.路由系统参数配置 4.1 可传入参数: 4.2 常用路由系统有以上五 5.反向生成URL: url ...

  3. linux系统盘扩容操作

    linux操作系统原来的50硬盘空间不够用了,如果再加一块60G硬盘,怎样扩容呢?今天我参考了前辈门的文档实际操作了一下,涉及到PV/VG/LV的相关操作. 当50G系统硬盘不够,再挂载一块60G,就 ...

  4. LOJ 3119: 洛谷 P5400: 「CTS2019 | CTSC2019」随机立方体

    题目传送门:LOJ #3119. 题意简述: 题目说的很清楚了. 题解: 记恰好有 \(i\) 个极大的数的方案数为 \(\mathrm{cnt}[i]\),则答案为 \(\displaystyle\ ...

  5. 在eclipse中安装使用lombok插件

    Eclipse安装lombok插件 1.下载lombok.jar,lombok.jar官方下载地址:https://projectlombok.org/download 2.双击下载好的lombak. ...

  6. nginx docker 命令: command not found

    1. ps: command not found 使用如下命令安装 apt-get update && apt-get -y install procps 2. vim: comman ...

  7. WooCommerce代码合集整理

    本文整理了一些WooCommerce代码合集,方便查阅和使用,更是为了理清思路,提高自己.以下WooCommerce简称WC,代码放在主题的functions.php中即可. 修改首页和分类页面每页产 ...

  8. meta设置与去除默认样式--移动端开发整理笔记(一)

    视口设置: <meta name="viewport" content="width=device-width,user-scalable=no,initial-s ...

  9. 【oracle】drop,truncate,delete用法

    drop: drop table 表名:删表 truncate: truncate table 表名:清空数据 delete: delete table 表名 [where 条件]:删某数据 日志:d ...

  10. 导入数据任务(id:373985)异常, 错误信息:解析导入文件错误,请检查导入文件内容,仅支持导入json格式数据及excel文件

    小程序导入,别人导出的数据库json文件,错误信息如下: 导入数据库失败, Error: Poll error, 导入数据任务(id:373985)异常,错误信息:解析导入文件错误,请检查导入文件内容 ...