CSS——鼠标样式
在浏览网页的过程中，当我们将鼠标移动到一些元素上时，鼠标的样式会发生相应的改变，例如当鼠标指向文本时，鼠标的样式会变成类似大写字母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——鼠标样式的更多相关文章
- 四大伪类,css鼠标样式设置,reset操作,静止对文本操作
07.31自我总结 一.a标签的四大伪类 a:link{样式} 未访问时的状态(鼠标点击前显示的状态) a:hover{样式} 鼠标悬停时的状态 a:visited{样式} 已访问过的状态(鼠标点击后 ...
- CSS 鼠标样式大全
cursor是CSS中用于定义鼠标在元素标签上的显示样式,如常用的手型鼠标样式 cursor: pointer; 也可以通过url网址指定扩展名一般为.cur的鼠标图片文件. 名称 属性代码 描述 默 ...
- CSS鼠标样式整理
鼠标样式的标签: cursor:*; //该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状: 鼠标样式: 值 描述 url 需使用的自定义光标的 URL. 注释:请在此列表的末端始终定义一 ...
- CSS鼠标样式 cursor 属性
值 描述 url 需使用的自定义光标的 URL. 注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标. default 默认光标(通常是一个箭头) auto 默认.浏览器 ...
- html css鼠标样式，鼠标形状
css鼠标手型cursor中hand与pointer Example:CSS鼠标手型效果 <a href="#" style="cursor:hand"& ...
- CSS 鼠标样式
设置鼠标指针放在一个元素边界范围内时所用的光标形状,需要对元素的css属性cursor进行设置. cursor属性可能的值: default 默认光标(通常是一个箭头) auto 默认.浏览器设置的( ...
- css鼠标样式cursor
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS鼠标样式
1.缺省方式(箭头形状): cursor:default; 2.手型 cursor: pointer; //通用的cursor: hand; //为了兼容ie老版本,可以同时写上
- 免费CSS鼠标样式代码大全
原文发布时间为:2008-08-01 -- 来源于本人的百度文章 [由搬家工具导入] http://5211.91.tc/sb.htm
- [CSS]cursor鼠标样式
用css控制鼠标样式的语法如下: <span style="cursor:*">文本或其它页面元素</span> 把 * 换成如下15个效果的一种: ...
随机推荐
- Bash与shell的区别
Bash 与 shell 的区别 介绍 常见的 shell 解释器有 sh.bash 这两种,其他的 ksh.csh 和 zsh 等是不常见的.Mac OS 中默认安装了以上所有类型,Windows ...
- 《深入理解Java虚拟机》读书笔记：虚拟机性能监控与故障处理工具
一.JDK的命令行 虚拟机性能监控与故障处理工具 工具 1.jps:虚拟机进程状况工具 jps主要用来输出JVM中运行的进程状态信息,它的功能也和ps命令类似:可以列出正在运行的虚拟机进程,并显示虚拟 ...
- 抓包整理————wireshark DNS 演练[三]
前言 简单整理一些wireshark dns 演练. 正文 简单介绍一下什么是dns. 这个其实可以百度一下哈,其实就是将域名转换为ip. 然后查询过程是这样的: 根域名服务器 权威服务器 dns 被 ...
- 英语 one day
前言 I do not know if it work,but just go. 内容 1.quote vt:摘要,引用 n:引语 He quote a passage from the presid ...
- redis 简单整理——Lua[十一]
前言 简单介绍一下Lua. 正文 为了保证多条命令组合的原子性,Redis提供了简单的事务功能以及集 成Lua脚本来解决这个问题. 前面提及到pipline,也提及到pipline 并不是原子性的,如 ...
- 重新整理数据结构与算法(c#)—— 算法套路二分法[二十四]
前言 前面写过二分法使用的是递归手法,然后该节才有不递归的方式执行. 二分法的时间复杂度为log(2)n.空间复杂度为:1. 正文 代码: static void Main(string[] args ...
- Django框架——csrf跨站请求伪造、csrf校验、csrf相关装饰器、auth认证、auth认证相关模块及操作
csrf跨站请求伪造 钓鱼网站:模仿一个正规的网站 让用户在该网站上做操作 但操作的结果会影响到用户正常的网站账户 但是其中有一些猫腻 eg:英语四六级考试需要网上先缴费 但是你会发现卡里的钱扣了但是 ...
- D365增加Model reference,解决does not designate a class or table编译错误问题
当我们导入基础数据时,需要创建一些基本的Emplyee信息,当引用到HcmHireNewWorkerContract和HcmWorkerTransition时,提示如下错误: 'HcmHireNewW ...
- 【笔记】Oracle使用笔记 0-sql injection&&&result of string concatenation is too long
报错:数据库操作错误."27,34006/v1:0-sql injection(SQL注入) 出现这个报错的情况背景是使用后端函数进行前端SQL语句组合进行数据插入的时候的提示 不太清楚是因 ...
- 力扣8(java)-字符串转整数(atoi)（中等）
题目: 请你来实现一个 myAtoi(string s) 函数,使其能将字符串转换成一个 32 位有符号整数(类似 C/C++ 中的 atoi 函数). 函数 myAtoi(string s) 的算法 ...