在浏览网页的过程中，当我们将鼠标移动到一些元素上时，鼠标的样式会发生相应的改变，例如当鼠标指向文本时，鼠标的样式会变成类似大写字母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. SpringBoot常用注解整理

    @SpringBootApplication 定义在main方法入口类处,用于启动sping boot应用项目 @Target(ElementType.TYPE) @Retention(Retenti ...

  2. Android 开发入门（5）

    0x07 数据存储 (1)共享参数 SharedPreferences a. 用法 用法 SharedPreferences 是 Android 的一个轻量级存储工具,采用的存储结构为键值对的方式 共 ...

  3. sql 语句系列(众数中位数与百分比)[八百章之第十五章]

    众数 众数就是出现最多的那个数. select sal,count(*) as cnt from emp where DEPTNO=20 group by sal 通过分组把他们的行数计算出来.那么最 ...

  4. 刪除k个数字后的最小值

    前言 比如说 1593212,去掉一个数字后,保留的是最小值. 原理:因为要保留最小值,那么要删除最高位的数字是最明显的. 那么1和5到底删除哪一个呢?当然是删除最大值了. 代码 public sta ...

  5. Memory Error

    不久前,为了满足工作中日常的各种实验测试需求,终于按需求组装一台塔式的server T440.但是没有多久就出现些问题,以下大概是问题和现象简单描述: (1). 最开始时,没几天就出现自动重启的问题, ...

  6. win10更新后使用ie浏览器自动跳转edge的解决方法

    win10更新后使用ie浏览器自动跳转edge的解决方法 ①在系统的搜索框中搜索internet选项 ②打开界面中,选择高级的栏位 ③然后在红框的地方找到启用第三方浏览器扩展,去掉勾选 ④应用,确定, ...

  7. 力扣586(MySQL)-订单最多的客户（简单）

    题目: 编写一个SQL查询,为下了 最多订单 的客户查找 customer_number . 测试用例生成后, 恰好有一个客户 比任何其他客户下了更多的订单. 查询结果格式如下所示. 进阶: 如果有多 ...

  8. 3.CSS三种基本选择器

    三种选择器的优先级: id选择器 > class选择器 > 标签选择器 1.标签选择器:会选择到页面上所有的该类标签的元素 格式: 标签{} 1 <!DOCTYPE html> ...

  9. 面向K8s设计误区

    K8s设计模式 Kubernetes是一个具有普遍意义的容器编排工具,它提供了一套基于容器构建分布式系统的基础依赖,其意义等同于Linux在操作系统中的地位,可以认为是分布式的操作系统. 自定义资源 ...

  10. Quick BI的可视分析之路

    简介: Quick BI是专为云上用户量身打造的智能数据分析和可视化BI产品,帮助企业快速完成从传统的数据分析到数据云化+分析云化的转变,将企业的业务数据产出后以最快的速度被推送到各组织侧消费使用.本 ...