在网页布局的时候，在特定的地方，光标形状各有区别。这个时候，就需要用到css的cursor属性。根据自身需要选择设置鼠标指针样式。

定义和用法

cursor 属性规定要显示的光标的类型（形状）。

该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状（不过 CSS2.1 没有定义由哪个边界确定这个范围）。

默认值： auto
继承性： yes
版本： CSS2
JavaScript 语法： object.style.cursor="crosshair"

可能的值 ( 图片测试于： chrome 版本 56.0.2924.87 // Firefor 版本 51.0.1 (32 位) // IE 8.0)

值 描述
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 此光标指示可用的帮助（通常是一个问号或一个气球）。

例子：

<!DOCTYPE html>

<html>

<head>

    <title>cursor属性</title>

</head>

<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>

参考地址：

weiqinl.com

简书

css cursor属性-显示的光标的类型(形状)的用法和定义的更多相关文章

  1. 光标属性CSS cursor 属性

    CSS cursor 属性 CSS cursor属性,以前不知道,如果以后用到自己看的 <html> <body> <p>请把鼠标移动到单词上,可以看到鼠标指针发生 ...

  2. CSS：CSS cursor 属性

    ylbtech-CSS:CSS cursor 属性 1.返回顶部 1. 实例 一些不同的光标: span.crosshair {cursor:crosshair;} span.help {cursor ...

  3. CSS cursor属性

    介绍: 该属性规定要显示的光标的类型,该属性定义了鼠标指针放在一个元素边界范围之内的时候所用的光标的形状. 常用的属性值: default:默认光标 auto:浏览器默认的光标 pointer:光标呈 ...

  4. CSS cursor 属性

    cursor 1.定义和用法 cursor 属性规定要显示的光标的类型(形状). 该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状(不过 CSS2.1 没有定义由哪个边界确定这个范围). 2 ...

  5. 【CSS】按钮的禁用与可用 CSS Cursor 属性

    禁用时的样式 可用时的样式 样式很简单,禁用就设置为灰色,可用就设置为红色,今天这个不是重点,重点的是,光标的样子 一般,禁用时候,光标移动到按钮的上方,光标如下 而在启用按钮的时候,光标移动到按钮上 ...

  6. CSS cursor 属性--css html 鼠标手型,鼠标形状,鼠标效果,样式

    css鼠标手型cursor中hand与pointer Example:CSS鼠标手型效果 <a href="#" style="cursor:hand"& ...

  7. CSS中cursor属性给标签加上小手形状

    HTML/CSS 2012-08-10 CSS,标签 我们发现a标签在网页中有一个值得注意的地方,即鼠标移到a标签上光标会变成一只小手的图标,移出a标签后又恢复为默认箭头. 如今,JS在网页中的功能越 ...

  8. CSS Cursor屬性 （光标停留显示）

    <html> <body> <p>请把鼠标移动到单词上,可以看到鼠标指针发生变化:</p> <span style="cursor:au ...

  9. css cursor属性详解

    cursor                       // 鼠标移上去的鼠标状态 属性值有以下: (可以将鼠标移上以下属性值看看效果) auto crosshair default pointer ...

随机推荐

  1. VS2010 Extension实践（2）

    在上一篇(VS2010 Extension (1)实践)里,主要展示了如何使用MEF扩展VS2010,来扩展编辑控制和展现自己的UI:在实现QuickToolbar的时候,发现MEF仅仅提供了很基本的 ...

  2. 人工神经网络，支持任意数量隐藏层，多层隐藏层，python代码分享

    http://www.cnblogs.com/bambipai/p/7922981.html------误差逆传播算法讲解 人工神经网络包含多种不同的神经网络,此处的代码建立的是多层感知器网络,代码以 ...

  3. Python 读取文件 with语句 管理上下文

    为了避免打开文件后忘记关闭,可以通过管理上下文 with open('file_name', 'r') as f: pass with 执行完毕之后 自动关闭且释放资源

  4. MySQL 基础命令

    的说法啊打发 第1章 SQL语句 mysql版本:针对mysql-5.6.36 版本 (5.7会有一些变动) 1.1 常用命令 # 查看数据库 mysql> show databases; sh ...

  5. cin\cout输入输出控制

    输入输出流的控制符 控制符 作 用 dec 设置数值的基数为10 hex 设置数值的基数为16 oct 设置数值的基数为8 setfill(c) 设置填充字符c,c可以是字符常量或字符变量 setpr ...

  6. python 打印几行空行、 打印不换行

    2.x版本中使用print '\n' * n #n为行数 3.x版本中使用print('\n' * n) #n为行数 print 'Hello',  :不会换行.[加上逗号(,)]

  7. 【LCT+主席树】BZOJ3514 Codechef MARCH14 GERALD07加强版

    3514: Codechef MARCH14 GERALD07加强版 Time Limit: 60 Sec  Memory Limit: 256 MBSubmit: 2023  Solved: 778 ...

  8. 软件安装之-------VM虚拟机安装windows系统

    一 准备工作 1 电脑已经安装上VMware Workstation 2 一个Windows系统,下载纯净版系统可到(www.itellyou.cn下载) 3  软碟通 下载可到(http://dow ...

  9. 激活IDEA

    1 先跳过提示 2 点击regist 3 输入注册码  : 我的注册码在这里找的 - >>  http://hw1287789687.iteye.com/blog/2153894

  10. 【Java】Java中BigDecimal的基本运算

    BigDecimal一共有4个够造方法,让来看看其中比较常用的两种用法: 第一种:BigDecimal(double val)Translates a double into a BigDecimal ...