在浏览网页的过程中，当我们将鼠标移动到一些元素上时，鼠标的样式会发生相应的改变，例如当鼠标指向文本时，鼠标的样式会变成类似大写字母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. Python根据主播直播时间段判定订单销售额归属

    写在前面:最近在群里看到一个这样的直播电商的场景觉得还是挺有趣的,于是就想用Python来实现. 需求描述:根据主播直播时间段结合销售订单的付款时间判断所属销售的归属 生成主播在线直播时间段数据 fr ...

  2. This version of Android Studio cannot open this project, please retry with Android Studio 4.0 or newer.

    前言 遇到的问题,This version of Android Studio cannot open this project, please retry with Android Studio 4 ...

  3. Mysql安装和远程登录--Centos7

    在Centos7中使用的包管理工具是yum,当然使用包管理工具安装也是最方便的. 本文操作内容需要在root用户下,否则有些步骤无法成功执行. 系统环境信息展示 安装 MySQL 提供的 RPM wg ...

  4. 【ModelScope】5分钟让你在大火的多模态领域权威榜单VQA上超越人类

    简介: ModelScope上开源了达摩院众多业界最强多模态模型,其中就有首超人类的多模态视觉问答模型mPLUG,小编从页面体验(一探).开发体验(二探).开放测试(三探)来探究多模态预训练模型能力. ...

  5. 基于阿里云 ASK 的 Istio 微服务应用部署初探

    简介: 本文会通过在 ASK 上试用 Istio 部署微服务应用的方式,来验证 ASK 对标准 Kubernetes 的兼容性.Istio 作为 Service Mesh(服务网格)的领导解决方案,一 ...

  6. 消息队列 RocketMQ 遇上可观测：业务核心链路可视化

    ​简介:本篇文章主要介绍 RocketMQ 的可观测性工具在线上生产环境的最佳实践.RocketMQ的可观测性能力领先业界同类产品,RocketMQ 的 Dashboard 和消息轨迹等功能为业务核心 ...

  7. 基于链路思想的SpringBoot单元测试快速写法

    ​简介:本文更偏向实践而非方法论,所提及的SpringBoot单元测试写法亦并非官方解,仅仅是笔者自身觉得比较方便.效率较高的一种写法.每个团队甚至团队内的每位开发可能都有自己的写法习惯和风格,只要能 ...

  8. 深信服智能边缘计算平台与 OpenYurt 落地方案探索与实践

    ​简介:本文将介绍边缘计算落地的机遇与挑战,以及边缘容器开源项目 OpenYurt 在企业生产环境下的实践方案. 作者:赵震,深信服云计算开发工程师,OpenYurt 社区 Member 编者案:在 ...

  9. 前沿分享｜阿里云资深技术专家 魏闯先：AnalyticDB PostgreSQL年度新版本发布

    ​简介: 本篇内容为2021云栖大会-云原生数据仓库AnalyticDB技术与实践峰会分论坛中,阿里云资深技术专家 魏闯先关于"AnalyticDB PostgreSQL年度新版本发布&qu ...

  10. 技术干货 ｜ Native 页面下如何实现导航栏的定制化开发？

    ​简介: 通过不同实际场景的描述,供大家参考完成 Native 页面的定制化开发. ​ 很多 mPaaS Coder 在接入 H5 容器后都会对容器的导航栏进行深度定制,本文旨在通过不同实际场景的描述 ...