cursor的所有样式
cursor可以为按钮或者某些区域强制定义一种鼠标移上去的鼠标光标形状。
定义和用法
cursor 属性规定要显示的光标的类型（形状）。
该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状（不过 CSS2.1 没有定义由哪个边界确定这个范围）。
可能的值
| 值 | 描述 |
|---|---|
| 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 | 此光标指示文本。 |
| vertical-text | 用于标示可编辑的垂直文本的光标。通常是大写字母 I 旋转90度的形状。 |
| wait | 此光标指示程序正忙（通常是一只表或沙漏）。 |
| progress | 带有沙漏标记的箭头光标。用于标示一个进程正在后台运行。 |
| help | 此光标指示可用的帮助（通常是一个问号或一个气球）。 |
| all-scroll | 有上下左右四个箭头，中间有一个圆点的光标。用于标示页面可以向上下左右任何方向滚动。 |
| col-resize | 有左右两个箭头，中间由竖线分隔开的光标。用于标示项目或标题栏可以被水平改变尺寸。 |
| row-resize | 有上下两个箭头，中间由横线分隔开的光标。用于标示项目或标题栏可以被垂直改变尺寸。 |
| no-drop | 带有一个被斜线贯穿的圆圈的手形光标。用于标示被拖起的对象不允许在光标的当前位置被放下。 |
| not-allowed | 禁止标记(一个被斜线贯穿的圆圈)光标。用于标示请求的操作不允许被执行。 |
下面直接写一个例子，使用浏览器打开，鼠标移上去就可以直接看到效果：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>cursor</title><style>table,th,td {border: 1px solid #ccc;}thead tr {background-color: #eee;}tbody tr:nth-of-type(even) {background-color: #f8f8f8;} </style>
</head>
<body>
<table cellpadding="6" cellspacing="0"><thead><tr><th>值</th><th>描述</th></tr></thead><tbody><tr style="cursor: url;"><td>url</td><td>需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。</td></tr><tr style="cursor: default;"><td>default</td><td>默认光标（通常是一个箭头）</td></tr><tr style="cursor: auto;"><td>auto</td><td>默认。浏览器设置的光标。</td></tr><tr style="cursor: crosshair;"><td>crosshair</td><td>光标呈现为十字线。</td></tr><tr style="cursor: pointer;"><td>pointer</td><td>光标呈现为指示链接的指针（一只手）</td></tr><tr style="cursor: move;"><td>move</td><td>此光标指示某对象可被移动。</td></tr><tr style="cursor: e-resize;"><td>e-resize</td><td>此光标指示矩形框的边缘可被向右（东）移动。</td></tr><tr style="cursor: ne-resize;"><td>ne-resize</td><td>此光标指示矩形框的边缘可被向上及向右移动（北/东）。</td></tr><tr style="cursor: nw-resize;"><td>nw-resize</td><td>此光标指示矩形框的边缘可被向上及向左移动（北/西）。</td></tr><tr style="cursor: n-resize;"><td>n-resize</td><td>此光标指示矩形框的边缘可被向上（北）移动。</td></tr><tr style="cursor: se-resize;"><td>se-resize</td><td>此光标指示矩形框的边缘可被向下及向右移动（南/东）。</td></tr><tr style="cursor: sw-resize;"><td>sw-resize</td><td>此光标指示矩形框的边缘可被向下及向左移动（南/西）。</td></tr><tr style="cursor: s-resize;"><td>s-resize</td><td>此光标指示矩形框的边缘可被向下移动（南）。</td></tr><tr style="cursor: w-resize;"><td>w-resize</td><td>此光标指示矩形框的边缘可被向左移动（西）。</td></tr><tr style="cursor: text;"><td>text</td><td>此光标指示文本。</td></tr><tr style="cursor: vertical-text;"><td>vertical-text</td><td>用于标示可编辑的垂直文本的光标。通常是大写字母 I 旋转90度的形状。</td></tr><tr style="cursor: wait;"><td>wait</td><td>此光标指示程序正忙（通常是一只表或沙漏）。</td></tr><tr style="cursor: progress;"><td>progress</td><td>带有沙漏标记的箭头光标。用于标示一个进程正在后台运行。</td></tr><tr style="cursor: help;"><td>help</td><td>此光标指示可用的帮助（通常是一个问号或一个气球）。</td></tr><tr style="cursor: all-scroll;"><td>all-scroll</td><td>有上下左右四个箭头，中间有一个圆点的光标。用于标示页面可以向上下左右任何方向滚动。</td></tr><tr style="cursor: col-resize;"><td>col-resize</td><td>有左右两个箭头，中间由竖线分隔开的光标。用于标示项目或标题栏可以被水平改变尺寸。</td></tr><tr style="cursor: row-resize;"><td>row-resize</td><td>有上下两个箭头，中间由横线分隔开的光标。用于标示项目或标题栏可以被垂直改变尺寸。</td></tr><tr style="cursor: no-drop;"><td>no-drop</td><td>带有一个被斜线贯穿的圆圈的手形光标。用于标示被拖起的对象不允许在光标的当前位置被放下。</td></tr><tr style="cursor: not-allowed;"><td>not-allowed</td><td>禁止标记(一个被斜线贯穿的圆圈)光标。用于标示请求的操作不允许被执行。</td></tr></tbody>
</table>
</body>
</html>效果图如下：
cursor的所有样式相关推荐
- cursor -- 定义鼠标样式
cursor -- 定义鼠标样式 取值: [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | n ...
- css cursor 鼠标指针样式总结
今天在修改页面细节时,对某些地方的鼠标指针的样式不满意,于是就趁机回顾了一下 css cursor 属性. css cursor 属性值总结: 使用示例: body {cursor: auto; } ...
- UE4/UE5 虚幻引擎，设置Mouse Cursor鼠标光标样式
UE虚幻引擎,设置Mouse Cursor鼠标光标样式的两种方法: 第一种.使用Player Controller中内部提供的鼠标样式. 第二种.在Project Settings项目设置的Softw ...
- cursor 设置光标样式
cursor CSS 属性设置光标的类型,在鼠标指针悬停在元素上时显示相应样式. 常用光标: cursor: hand; 是手型 cursor: pointer; 也是手型,这里推荐使用这种,因为这可 ...
- 鼠标样式(cursor)
css学习地址: http://www.dreamdu.com/css/property_cursor/ cursor -- 定义鼠标样式 取值: [ [<uri> ,]* [ auto ...
- html鼠标样式怎么去掉,CSS鼠标样式cursor属性怎么设置
CSS鼠标样式可以通过设置cursorg属性,从而达到鼠标在对象上移动的鼠标样式. 一般在网页中一些特殊版块布局时,会遇到这类需求,比如鼠标经过指针变为手指形状等样式,接下来我们介绍鼠标指针样式cur ...
- CSS cursor 属性-鼠标形状
cursor -- 定义鼠标样式取值: [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne ...
- html设置自定义光标,pixi.js 自定义光标样式
pixi 介绍 Pixi是一个超快的2D渲染引擎,通过Javascript和Html技术创建动画或管理交互式图像,从而制作游戏或应用. 游戏中都会做一些跟整个游戏画面风格相符的定制光标,比如英雄联盟中 ...
- css更改鼠标指针样式，几种鼠标点击效果
原文链接 : https://blog.csdn.net/qq_42038623/article/details/104875481 更改鼠标指针样式 1. 鼠标指针的不同样式 平常,我们在浏览界面时 ...
最新文章
- AI 如何推进全球可持续发展？
- 通过实战跑分来展示HBase2.x的写入性能
- STL源码学习（一）迭代器概念与traits编程技法
- JS之Boolean的toString方法
- php递归删除文件,PHP 递归删除文件夹
- PTA-数组元素循环右移问题
- 基于LSTM搭建文本情感分类的深度学习模型:准确率95%
- 威纶触摸屏与台达DVP系列PLC通信的参数设置和连接电缆
- 营收增长“疫”外超预期，走向手游化的动视暴雪能否弯道超车？
- 神经网络与机器学习导言笔记——反馈
- 【工科数学分析】2021-10-01-工科数学分析叒复习（一）
- lattice若干bug
- 【干货分享】 淘宝客发朋友圈的技巧
- 基于龙芯CPU银河麒麟操作系统的国产半实物仿真系统ETestDEV
- 大型电商网站系统架构演变过程
- [jni] [android] 用C++开发安卓程序
- 使用 Cocos Creator 引擎创建3D资产
- Linux常用命令大全，一篇搞定
- 【26】Android - 初识Fragment
- 江苏机器人竞赛南航_我校举办第十一届机器人大赛暨第十届江苏省大学生机器人大赛校内选拔赛...