在浏览网页的过程中，当我们将鼠标移动到一些元素上时，鼠标的样式会发生相应的改变，例如当鼠标指向文本时，鼠标的样式会变成类似大写字母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. HarmonyOS极客松“上分秘籍”! 高手们顶峰相见！

      HarmonyOS 极客马拉松2023 火热进行中,我们期待与各位开发者相聚一起,践行极客精神,创造无限可能! 我们鼓励各位极客们自由组队,挥洒创意,用HarmonyOS 探索移动应用和服务的更多 ...

  2. 高并发场景QPS等专业指标揭秘大全与调优实战

    高并发场景QPS等专业指标揭秘大全与调优实战 最近经常有小伙伴问及高并发场景下QPS的一些问题,特意结合项目经验和网上技术贴做了一些整理和归纳,供大家参考交流. 一.一直再说高并发,多少QPS才算高并 ...

  3. 重新整理 mysql 基础篇—————表锁和全局锁[六]

    前言 锁从大的方面可以分为: 1.全局锁 2.表锁 3.行锁 正文 全局锁 全局锁就是对整个数据加上读锁. 在mysql 中,加入全局锁的命令就是: Flush tables with read lo ...

  4. c# 优化代码的一些规则——判断null值得不同写法[六]

    前言 先来看一个例子: 假设updated 是一个委托: if(updated!=null) { updated(); } 请问上面写法在多线程中安全吗?如果不安全会抛出什么异常呢? 正文 上面的答案 ...

  5. c# mvc action 跳转方式

    前言 c# 的mvc 有很多的action跳转方式,在此总结一下具体的跳转方法. 这里不用去记,而是知道能怎么做,为什么能这样做,重在思考. 正文 一.RedirectToAction("I ...

  6. Docker compose 部署 nginx+php

    Docker compose 部署 nginx+php 拉取Docker镜像 docker pull nginx:1.21.6 docker pull php:7.4.28-fpm 创建docker- ...

  7. xxx，一个神奇的 Python 库

    前几天,我在<技术周刊的转变:如何平衡热爱与现实?>一文里写过国内 Python 自媒体圈在近几年的两个现象(仅个人观感,无科学数据支撑): Python 广告投放出现断崖式萎缩 Pyth ...

  8. js中“??“和“?.“怎么用？

    ??:空值合并操作符 逻辑操作符,左侧为null和undefined时,才返回右侧的数const sum = null ?? 12console.log(sum);//输出12const sum1 = ...

  9. 数据结构实验代码分享 - 5 （HashTable - 链接法）

    题目:通信录查询系统(查找应用) [问题描述] 设计散列表(哈希表)实现通讯录查找系统. (1) 设每个记录有下列数据项:电话号码.用户名.地址: (2) 从键盘输入各记录,分别以电话号码为关键字建立 ...

  10. 力扣512(MySQL)-游戏玩法分析Ⅱ（简单）

    题目: 需求:请编写一个 SQL 查询,描述每位玩家首次登陆的设备名称 查询结果格式在以下示例中: 解题思路: 方法一:使用dense_rank() over(partition by ...orde ...