在浏览网页的过程中，当我们将鼠标移动到一些元素上时，鼠标的样式会发生相应的改变，例如当鼠标指向文本时，鼠标的样式会变成类似大写字母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. VSCode如何通过Ctrl+P快速打开node_modules中的文件

    背景 咱们新建一个NodeJS项目,必然会安装许多依赖包,因此经常需要查阅某些依赖包的源码文件.但是,由于node_modules目录包含的文件太多,出于性能考虑,在VSCode中默认情况下是禁止搜索 ...

  2. Mybatis实现增删改查

    ​1.CRUD 1.1namespace namespace中的包名必须和Dao/mapper接口包名一致 1.2select 选择,查询语句 id:就是对应的namespace中的方法名 resul ...

  3. HarmonyOS智能座舱体验是怎样炼成的？立即查看

    原文链接:https://mp.weixin.qq.com/s/AGY2hAeXngtRrZFk0FXe5g,点击链接查看更多技术内容: 随着AITO问界M5热卖以及M7.M5 EV版本的陆续交付,A ...

  4. BTC的数据结构

    区块链是一个个block所构成的链,或者链表状的数据结构,在比特币中或者区块链中,一个重要的组成部分是哈希指针 指针 在程序运行过程中,需要用到数据.最简单的是直接获取数据,但当数据本身较大,需要占用 ...

  5. 进一步释放技术红利，阿里云推出全新内存增强型实例re6，性能提升30%

    5月7日,国内最大云计算厂商阿里云宣布推出全新一代内存增强型实例,提供1:14.8超大内存比内存容量,满足内存型数据库如SAP HANA.Redis等应用,充分释放技术红利,帮助线下企业快速上云,完成 ...

  6. 数据库误操作后悔药来了：AnalyticDB PostgreSQL教你实现分布式一致性备份恢复

    ​简介: 本文将介绍AnalyticDB PostgreSQL版备份恢复的原理与使用方法. 一.背景 AnalyticDB PostgreSQL版(简称ADB PG)是阿里云数据库团队基于Postgr ...

  7. [Go] godoc 打开本地文档, windows 同样适用

    godoc 提供了在无网环境下 浏览官方文档的便利. 示例: $ go get golang.org/x/tools/cmd/godoc $ godoc -http=localhost:6060 Li ...

  8. 七天.NET 8操作SQLite入门到实战 - （2）第七天Blazor班级管理页面编写和接口对接

    前言 上一章节我们引入BootstrapBlazor UI组件完成了EasySQLite后台界面的基本架子的搭建,本章节的主要内容是Blazor班级管理页面编写和接口对接. 七天.NET 8 操作 S ...

  9. WPF 使用 Win10 的 WinRT 自带 Windows.Media.Ocr 实现图片转文本

    世界上有很多 OCR 识别技术,本文来和大家介绍如果在 WPF 里,在运行到 win10 的设备上,通过 Windows Runtime 自带的 Windows.Media.Ocr 实现在给定的图片里 ...

  10. WPF 布局 在有限空间内让两个元素尽可能撑开的例子

    我在尝试写一个显示本机 WIFI 热点的账号和密码的控件,要求此控件在有限的空间内显示.但是尽可能显示出热点的账号和密码.而热点的账号和密码是用户配置的,也许长度很长.我的需求是在假如账号的长度较短的 ...