在网页布局的时候，在特定的地方，光标形状各有区别。这个时候，就需要用到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. mysql 数据表字段修改sql 语句

    1 新增字段 alter table bulletin add citycode varchar(6) not null default 0 [after `id`]; # 城市代码 2 修改字段 a ...

  2. Xamarin 简单的网络请求

    //try            //{            //    var httpReq = (HttpWebRequest)HttpWebRequest.Create(new Uri(re ...

  3. Python学习_01_对象

    之前关于python的知识比较零散,这一个系列的随笔将python重新学习整理一遍.学习书籍<Python核心编程>第二版. Python对象基础 python并不是一个单纯面向对象的语言 ...

  4. Javascript流程控制

    Javascript流程控制 1.条件语句 (1)if(exp)执行一句代码 (2)if(exp){执行代码段;} (3)if(exp){exp为true执行代码段}else{exp为false执行的 ...

  5. Js相关用法个人总结

    Js相关用法个人总结  js中将数组元素添加到对象中var obj = {}; var pushArr = [11,22,33,44,55,66]; for(var i=0;i<pushArr. ...

  6. yield next和yield* next的区别

    yield next和yield* next之间到底有什么区别?为什么需要yield* next?经常会有人提出这个问题.虽然我们在代码中会尽量避免使用yield* next以减少新用户的疑惑,但还是 ...

  7. docker with flannel

    ** 原创文章,请勿转载 ** docker的单host,多container环境下,是使用host的docker0网桥进行通信的.如果跨host, container之间要通信怎么办呢?答案是fla ...

  8. python3之日期和时间

    1.python3日期和时间 Python 程序能用很多方式处理日期和时间,转换日期格式是一个常见的功能. Python 提供了一个 time 和 calendar 模块可以用于格式化日期和时间. 时 ...

  9. ionic build android 中的报错详细原因以及解决方法

    一.执行打包命令 ionic build android 1.报错: 原因: 其实也并非报错,但是会一直在下载gradle,由于网络或者其他原因,导致下载比较慢, 解决方案: 手动下载gradle,并 ...

  10. 使用Java内置的Http Server构建Web应用

    一.概述 使用Java技术构建Web应用时, 我们通常离不开tomcat和jetty之类的servlet容器,这些Web服务器功能强大,性能强劲,深受欢迎,是运行大型Web应用的必备神器. 虽然Jav ...