<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. Odoo中的env详解

    转载请注明原文地址:https://www.cnblogs.com/ygj0930/p/10826382.html 一:environment environment类提供了对ORM对象的封装,同时提 ...

  2. Mysql数据库之调整最大连接数

    .查看最大连接数 show variables like '%max_connections%'; 2.修改最大连接数 set GLOBAL max_connections = 200; 以下的文章主 ...

  3. 二十、Python与Mysql交互

    先安装一个python与MySQL交互的包:MySQL-python $ gunzip MySQL-python-1.2.2.tar.gz $ tar -xvf MySQL-python-1.2.2. ...

  4. nbu虚拟机恢复样例(之后补图)

    9.2.1进入Backup,Archive,and Restore管理器 9.2.2选择客户端和策略类型 9.2.3选择恢复的虚拟机 9.2.4恢复虚拟机到不同目录 9.2.5更改虚拟机名称和存储 因 ...

  5. 【JavaScript】内部与外部引入方式

    1.内部引入方式: script的type属性默认为"text/javascript",可以不写 <script type="text/javascript&quo ...

  6. 第02节-BLE协议各层的形象化理解

    本篇博客根据韦大仙视频,整理所得. 先上框图: ATT层 从ATT开始看,在上篇博客讲的医院结构里面有个检验室,检验室可以得到各项结果,但是它并不知道这些结果代表什么含义.类比的在BLE协议栈里面,A ...

  7. Layer获取iframe的dom元素及调用iframe页的js方法

    1. 父页面点击第一个按钮触发,获取子页面中的body元素,调用子页面中定义的js方法 yes : function(index,layero){ //获取iframe的body元素 var body ...

  8. index获取子DOM对象在父DOM对象的内位置索引值

    <script type="text/javascript">    $(function(){        var $p1=$('#id1 p:visible'); ...

  9. 07_LACP负载分担(数通华为)

    1. 网络拓扑 2. SW1配置:[SW1]vlan batch 10 20[SW1]interface GigabitEthernet 0/0/1[SW1-GigabitEthernet0/0/1] ...

  10. BILIBILI之滑块验证

    bilibili的滑动验证码图片比较好玩,和前一篇不大一样. 采用canvas方法,分析发现只找到一个图片,不过,可以通过设置display截图方式获得2张图(完整图片,带缺口的图片),取得图片后接下 ...