在浏览网页的过程中，当我们将鼠标移动到一些元素上时，鼠标的样式会发生相应的改变，例如当鼠标指向文本时，鼠标的样式会变成类似大写字母I的样子；当鼠标指向链接时，鼠标会变成一个小手的形状等。

除了这些默认的变化外，您还可以通过 CSS 中的 cursor 属性来改变网页中鼠标（光标）的样式，下表中列举了 cursor 属性的可选值：

提示：由于计算机系统的不同，鼠标的样式会存在一定的差异。

例子：

<!DOCTYPE html>

<html>

<head>

    <style>

        div {

            height: 30px;

            border: 1px solid green;

            margin-top: 10px;

        }

        .cell {

            cursor: cell;

        }

        .crosshair {

            cursor: crosshair;

        }

        .text {

            cursor: text;

        }

        .vertical-text {

            cursor: vertical-text;

        }

        .alias {

            cursor: alias;

        }

        .copy {

            cursor: copy;

        }

        .move {

            cursor: move;

        }

        .no-drop {

            cursor: no-drop;

        }

    </style>

</head>

<body>

    <div class="cell">cursor: cell;</div>

    <div class="crosshair">cursor: crosshair;</div>

    <div class="text">cursor: text;</div>

    <div class="vertical-text">cursor: vertical-text;</div>

    <div class="alias">cursor: alias;</div>

    <div class="copy">cursor: copy;</div>

    <div class="move">cursor: move;</div>

    <div class="no-drop">cursor: no-drop;</div>

</body>

</html>

　　

除了可以使用上表中介绍的光标样式外，您也可以使用图像文件来自定义光标的样式，如下所示：

cursor: url("custom.gif"), url("custom.cur"), default;

　　

您可以使用 url() 定义多个光标的样式文件，每个 url() 之间使用逗号,分隔，上面示例中 custom.gif、custom.cur 就是自定义的光标文件。需要注意的是，在自定义光标样式时，要在最后定义一个上表中的通用光标样式，防止使用 url() 中定义的光标图像资源失效。

提示：.cur 格式是光标文件的标准格式，您可以使用一些在线工具（例如 https://convertio.co/zh/cur-converter/）将 .jpg、.gif 等格式的图像文件转换为 .cur 格式。

CSS——鼠标样式的更多相关文章

  1. 四大伪类,css鼠标样式设置,reset操作,静止对文本操作

    07.31自我总结 一.a标签的四大伪类 a:link{样式} 未访问时的状态(鼠标点击前显示的状态) a:hover{样式} 鼠标悬停时的状态 a:visited{样式} 已访问过的状态(鼠标点击后 ...

  2. CSS 鼠标样式大全

    cursor是CSS中用于定义鼠标在元素标签上的显示样式,如常用的手型鼠标样式 cursor: pointer; 也可以通过url网址指定扩展名一般为.cur的鼠标图片文件. 名称 属性代码 描述 默 ...

  3. CSS鼠标样式整理

    鼠标样式的标签: cursor:*;  //该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状: 鼠标样式: 值 描述 url 需使用的自定义光标的 URL. 注释:请在此列表的末端始终定义一 ...

  4. CSS鼠标样式 cursor 属性

    值 描述 url 需使用的自定义光标的 URL. 注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标. default 默认光标(通常是一个箭头) auto 默认.浏览器 ...

  5. html css鼠标样式，鼠标形状

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

  6. CSS 鼠标样式

    设置鼠标指针放在一个元素边界范围内时所用的光标形状,需要对元素的css属性cursor进行设置. cursor属性可能的值: default 默认光标(通常是一个箭头) auto 默认.浏览器设置的( ...

  7. css鼠标样式cursor

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. CSS鼠标样式

    1.缺省方式(箭头形状): cursor:default; 2.手型 cursor: pointer;   //通用的cursor: hand;     //为了兼容ie老版本,可以同时写上

  9. 免费CSS鼠标样式代码大全

    原文发布时间为:2008-08-01 -- 来源于本人的百度文章 [由搬家工具导入] http://5211.91.tc/sb.htm

  10. [CSS]cursor鼠标样式

     用css控制鼠标样式的语法如下: <span style="cursor:*">文本或其它页面元素</span>  把 * 换成如下15个效果的一种:   ...

随机推荐

  1. spark-shell 启动设置动态分区，snappy压缩、parquet存储以及备份

    1.spark-shell 启动设置动态分区 --executor-memory 16G \ --total-executor-cores 10 \ --executor-cores 10 \ --c ...

  2. SVM三则

    硬间隔SVM SVM被提出来, 解决模式识别中, 数据的分类问题,属于有监督算法中的一种, 如上图所示, 于其他的线性回归方式不同, SVM企图去寻找一个最完美的超平面, 因为能正确分类样本的线, 它 ...

  3. Python/Spring Cloud Alibaba开发--前端复习笔记（1）———— html5和css3.html基础

    Python/Spring Cloud Alibaba开发–前端复习笔记(1)---- html5和css3.html基础 1)概述和基本结构 超文本标记语言.超文本指超链接,标记指的是标签. 基本结 ...

  4. 《c#高级编程》第5章C#5.0中的更改（十一）——字符串插值

    在 C# 5 中,引入了字符串插值(string interpolation)语法,它提供了一种简单.直观的方式来将变量的值嵌入到字符串中.在以前的版本中,我们需要使用字符串格式化功能来实现这个目的, ...

  5. 力扣571(MySQL)-给定数字的频率查询中位数（困难）

    题目: Numbers 表保存数字的值及其频率. 在此表中,数字为 0, 0, 0, 0, 0, 0, 0, 1, 2, 2, 2, 3,所以中位数是 (0 + 0) / 2 = 0. 请编写一个查询 ...

  6. 力扣430(java)-扁平化多级双向链表（中等）

    题目: 你会得到一个双链表,其中包含的节点有一个下一个指针.一个前一个指针和一个额外的 子指针 .这个子指针可能指向一个单独的双向链表,也包含这些特殊的节点.这些子列表可以有一个或多个自己的子列表,以 ...

  7. 如何合理使用 CPU 管理策略，提升容器性能？

    ​简介:CPU Burst.拓扑感知调度是阿里云容器服务 ACK 提升应用性能的两大利器,它们解决了不同场景下的 CPU 资源管理,可以共同使用.点击下文,查看详情! 作者:张佐玮(佑祎) 前言 在云 ...

  8. KubeVela v1.2 发布：你要的图形化操作控制台 VelaUX 终于来了！

    ​简介:时间来到 2022 年,KubeVela 也正式进入了第四个阶段,在原先核心控制器 API 基本稳定的基础上,我们以插件的形式增加了一系列开箱即用的功能.让开发者可以通过 UI 控制台的方式, ...

  9. 【产品动态】解读Dataphin流批一体的实时研发

    ​简介: Dataphin作为一款企业级智能数据构建与管理产品,具备全链路实时研发能力,从2019年开始就支撑可集团天猫双11的实时计算需求,文章将详细介绍Dataphin实时计算的能力. 背景 每当 ...

  10. IIncrementalGenerator 判断程序集之间可见关系

    本文告诉大家如何在使用 IIncrementalGenerator 进行增量的 Source Generator 生成代码时,如何判断两个程序集之间是否存在 InternalsVisibleTo 关系 ...