CSS光标cursor

前面的话

  在浏览器中,光标对于提供交互反馈很有用。通过在不同的场景中改变光标,就能赋予其不同的含义

 

定义

  cursor光标

  值: [<uri>,]*[auto | default | pointer | crosshair | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress]] | inherit

  初始值: auto

  应用于: 所有元素

  继承性: 有

 

标准样式

  CSS2提供了相对较少的选择

url: 自定义光标的URL
default: 默认光标,通常是一个箭头
auto: 浏览器自动识别的光标
crosshair : 十字线
pointer: 手型指针
move: 移动指针
e-resize: 向东移动指针
ne-resize: 向东北移动指针
nw-resize: 向西北移动指针
n-resize: 向北移动指针
se-resize: 向东南移动指针
sw-resize: 向西南移动指针
s-resize: 向南移动指针
w-resize: 向西移动指针
text: 文本指针
wait: 指示程序正忙
help: 帮助指针

style="width: 100%; height: 320px;" src="https://demo.xiaohuochai.site/css/cursor/c1.html" frameborder="0" width="320" height="240">

 

拓展样式

  CSS3增加了更多的cursor的样式值

  [注意]所有拓展样式IE7-浏览器都不支持

cursor:none (not IE8, Safari)
cursor:context-menu (not Safari,Firefox,Chrome)
cursor:cell (not Safari)
cursor:alias (not Safari)
cursor:copy (not IE,Safari)
cursor:grab (not IE,Safari,Chrome)
cursor:grabbing (not IE,Safari,Chrome)
cursor:zoom-in (not IE,Safari)
cursor:zoom-out (not IE,Safari)
cursor:vertical-text
cursor:no-drop
cursor:not-allowed
cursor:all-scroll
cursor:ew-resize
cursor:ns-resize
cursor:nesw-resize
cursor:nwse-resize
cursor:col-resize
cursor:row-resize

style="width: 100%; height: 400px;" src="https://demo.xiaohuochai.site/css/cursor/c2.html" frameborder="0" width="320" height="240">

私有样式

  有些浏览器还提供了增加浏览器前缀的私有样式

  [注意]safari将-webkit-grab和-webkit-grabbing都解释为default

cursor:-webkit-grab; cursor: -moz-grab;
cursor:-webkit-grabbing; cursor: -moz-grabbing;
cursor:-webkit-zoom-in; cursor: -moz-zoom-in;
cursor:-webkit-zoom-out; cursor: -moz-zoom-out;    

style="width: 100%; height: 300px;" src="https://demo.xiaohuochai.site/css/cursor/c3.html" frameborder="0" width="320" height="240">

自定义样式

  所有浏览器都支持使用后缀名为.cur的文件,chrome、firefox、safari还支持使用普通图片制作光标

  [注意]使用URL自定义样式,后面必须跟有一个逗号和某个通用关键字

//错误
cursor: url('m.cur');
//正确
cursor: url('m.cur'),auto;

style="width: 100%; height: 280px;" src="https://demo.xiaohuochai.site/css/cursor/c44.html" frameborder="0" width="320" height="240">

常见应用

  链接的默认光标是手型指针pointer,通过光标的变化可以让访问者清楚的知道该元素是可点击的

  元素的title属性用来提供元素的额外信息,配合help光标可以得到更好的表现方式

span[title]{
cursor: help;
border-bottom: 1px solid gray;
}
<div><span title="Cascading Style Sheets">CSS</span> is much too interesting</div>

style="width: 100%; height: 40px;" src="https://demo.xiaohuochai.site/css/cursor/c5.html" frameborder="0" width="320" height="240">


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/362925.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

jquery获取value值时将数字型字符串前面的0自动截取处理方法

<li class"cwhite" value"02" id"02" οnclick"getQuestionList(02,this);">数学</li> var subjectCode $(obj).find(".bd.subject li[classcwhite active]").val(); 这种方法会把02前面的0自动截取 var subje…

《Effective C#》Item 21:用委托实现回调

委托属于C#中的新名词&#xff0c;它的应用也非常广泛&#xff0c;例如事件就是委托最简单而又直接的例子。 那么首先说说什么是委托&#xff0c;其实委托在用过C或者C的人看来就是函数指针&#xff0c;不过使用C#的大多数人都没有用过这两门语言&#xff0c;因此对委托的理解不…

人生建议

1、不要在最幸福的时候许诺。 2、不要在暴怒的时候回信息。 3、不要在悲伤的时候做决定。 4、不要在迷茫的时候选择轻松的道路。 5、不要在自己做决定后怪别人。 6、不要把现在的幸福当作理所当然。 转载于:https://www.cnblogs.com/tarenacode/p/11460619.html

Spring MVC中的验证组

可以通过groups属性将Bean验证中的验证约束添加到一个或多个组。 这使您可以限制在验证期间应用的约束集。 在某些小组应先于其他小组进行验证&#xff08;例如在向导中&#xff09;的情况下&#xff0c;这可能很方便。 从Spring MVC 3.1开始&#xff0c;可以通过org.springfra…

表单美化

前面的话 由于一些系统原生的表单控件在各个浏览器中显示效果不一致&#xff0c;且无法设置某些关键CSS样式&#xff0c;为了保证表单在各浏览器中的兼容性&#xff0c;表单美化就是不得不做的一件事了 单选按钮 【实现效果】 style"width: 100%; height: 120px;" s…

【Python3.6】python打包成exe

D:\python_test>pip3 install pyinstaller…………D:\python_test>pyinstaller -F -w ui.py 84 INFO: PyInstaller: 3.3.1 85 INFO: Python: 3.6.4 88 INFO: Platform: Windows-10-10.0.15063-SP0 93 INFO: wrote D:\python_test\ui.spec 94 INFO: UPX is not available.…

算法题解:连续子数组的最大和及其下标

题目 输入一个整型数组&#xff0c;数组里有正数也有负数。数组中一个或连续的多个整数组成一个子数组。求所有子数组的和的最大值。要求时间复杂度为O(n)。 举例 输入&#xff1a;2, -3, 4, 5, -9 输出&#xff1a;9 和最大的连续子数组是 {4, 5}&#xff0c;结果就是9。 思路…

简而言之,JUnit:Hello World

对于Java世界中的开发人员而言&#xff0c; JUnit似乎是最受欢迎的测试工具 。 因此&#xff0c;难怪就此主题已经写了一些好书 。 但是&#xff0c;通过以顾问为生&#xff0c;我仍然经常遇到程序员&#xff0c;他们至多对工具及其正确用法都不了解。 因此&#xff0c;我想到…

jQuery获取所有父级元素及同级元素及子元素的方法

jQuery获取所有父级元素及同级元素及子元素的方法 1.获取父级元素 $("#id").parent() 获取其父级元素 $("#id").parents() 获取其所有的祖先元素 $("#id").closest() 获取其最近的祖先元素&#xff0c;依次上溯 2.获取同级元素 $("#…

考取RHCE认证的历程,总结的经验

昨天去考试的&#xff0c;今天下午结果出来了&#xff0c;达到了我的预期。成功的获取了RHCE认证&#xff0c;以后我也是有证的人咯~&#xff0c;开个玩笑。 其实去年的时候我就曾经想要去考取的&#xff0c;我原来一直以为考取RHCE认证时考题都是英文的呢&#xff1f;因为我英…

Python萌新笔记

Mychael上了大学&#xff0c;对Python产生了浓厚的兴趣&#xff0c;便开始了Python的学习 学习的时候&#xff0c;感觉Python确实比以往学的C表达简洁很多&#xff0c;而又不失强大 以后的学习笔记就记在这啦 变量 Python中的变量无需声明&#xff0c;其类别也只有具体赋值的时…

明天一定要记得放一个硬币在口袋

以前上班总是从陆家嘴站下来&#xff0c;然后走到公司。现在改从东昌路站下。地铁陆家嘴站附近&#xff0c;现在正忙着收尾世博前的那些形象工程。满地的泥土、污水&#xff1b;空气中充斥着机器的轰鸣声、粉尘、烟雾、臭气。更让人难受的还有哪些长着&#xff0c;遭受了地震蹂…

命令设计模式的应用

嗨&#xff0c;您好&#xff01; 今天&#xff0c;我将与您分享一种非常出色的编程设计模式。 它有很多用法&#xff0c;是我的最爱之一。 编程设计模式命令具有多种用例。 在这篇文章中&#xff0c;我们将看到如何实现现实世界中的某些东西。 我们将使用电子汽车钥匙来打开&…

代码块,-- 循环结构--字符串的格式化--字符串相关函数功能

### -代码块 以冒号作为开始,用缩进来划分相同的作用域,称之为代码块,代码块是一个整体,一个文件也可称代码块 作用域&#xff1a;作用的区域 ### -流程控制 (1)流程控制的定义 (2)流程控制的结构 ### -分支结构 关键字:if elif else (1)分支结构的种类 (2)分支结构的特点 ###…

adodb.stream对象的方法/属性

cancel 方法 使用方法如下 object.cancel 说明&#xff1a;取消执行挂起的异步 execute 或 open 方法的调用。 close 方法 使用方法如下 object.close &#xff1a;关闭对像 copyto 方法 使用方法如下 object.copyto(deststream,[charnumber]) 说明&#xff1a;将对像的数据复制…

MongoDB非关系型数据库开发手册

一&#xff1a;NoSql数据库 什么是NoSQL? NoSQL&#xff0c;指的是非关系型的数据库。NoSQL有时也称作Not Only SQL的缩写&#xff0c;是对不同于传统的关系型数据库的数据库管理系统的统称。 NoSQL用于超大规模数据的存储。&#xff08;例如谷歌或Facebook每天为他们的用户收…

Spring Batch作为Wildfly模块

长期以来&#xff0c;Java EE规范缺少批处理API。 今天&#xff0c;这对于企业应用程序来说是必不可少的。 这是最后固定与JSR-352批处理应用程序的Java平台现在的Java EE提供7 JSR-352得到了它的的灵感Spring Batch的对手。 两者涵盖相同的概念&#xff0c;尽管生成的API有所不…

springCloud Eureka 注册中心原理及配置理解(一)

Eureka 原理与步骤原理&#xff1a;服务提供方启动后将注册到 注册中心&#xff0c;提供IP, 名字&#xff0c;什么服务等信息&#xff0c;服务调用方作为客户端注册到注册中心后&#xff0c;拉取注册中心的服务列表&#xff0c;在通过负载均衡调用对应的服务提供方。注册中心可…

react系列教程

这个系列将从基础语法讲起&#xff0c;把react全家桶都讲到&#xff0c;然后到具体的使用&#xff0c;最后完成后&#xff0c;会写一个完整的demo。 前置要求&#xff1a; 基本的CSS&#xff0c;JS要熟练。 部分ES6语法需要了解。可以参考下面提到的阮一峰老师的《ECMAScript …

解决DataGridView绑定List后不能排序的问题

阅读全文并下载例子 &#xff1a;http://www.sufeinet.com/forum.php?modviewthread&tid190 以前不都是用table直接绑定DataGridView的&#xff0c;没有出现过不能排序的问题&#xff0c;初试List结果发现不管怎么样都不能实现排序的功能&#xff0c;有朋友说 DataGridVie…