CSS 鼠标样式 cursor属性[通俗易懂]

CSS 鼠标样式 cursor属性[通俗易懂]鼠标样式在浏览网页时,通常看到的鼠标光标形状有箭头、手形、沙漏等,而在windows中实际看到的鼠标指针种类比这个还要多。一般情况下,鼠标光标的形状由浏览器负责控制,大多数情况的光标形状为箭头形状,当指向链接时,光标形状会变成手指形状。为了创建丰富的Web应用,CSS中提供了cursor属性,允许设计师为页面上的任何元素自定义鼠标光标的形状。如,把鼠标光标样式设置为row-resize,表…

大家好,又见面了,我是你们的朋友全栈君。

在浏览网页时,通常看到的鼠标光标形状有箭头、手形、沙漏等,而在 windows 中实际看到的鼠标指针种类比这个还要多。

一般情况下,鼠标光标的形状由浏览器负责控制,大多数情况的光标形状为箭头形状,当指向链接时,光标形状会变成手指形状。

为了创建丰富的Web应用,CSS中提供了 cursor属性,允许设计师为页面上的任何元素自定义鼠标光标的形状。如,把鼠标光标样式设置为 row-resize,表示该对象可以被垂直改变尺寸:


  1. .resize {
  2.    cursor: row-resize;
  3. }

其实,早在CSS2时就已经支持 cursor属性了,不过当时提供的可选值相对较少。对于交互式Web应用来说,鼠标光标样式已经变得越来越重要。因此,CSS3对 cursor属性进行了扩展,并提供了更多的可选值,不同取值的含义、及在windows下的指针效果见表 4‑10:

表 4-10 cursor属性的取值、含义及图例
属性值 含义 图例
auto 浏览器根据当前上下文,自动确定最适合的光标类型 CSS 鼠标样式 cursor属性[通俗易懂]
default 使用客户端操作系统的默认光标 CSS 鼠标样式 cursor属性[通俗易懂]
none 无光标 CSS 鼠标样式 cursor属性[通俗易懂]
context-menu 标示对象是上下文菜单 CSS 鼠标样式 cursor属性[通俗易懂]
help 标示有帮助信息存在 CSS 鼠标样式 cursor属性[通俗易懂]
pointer 竖起一只手指的手形光标 CSS 鼠标样式 cursor属性[通俗易懂]
progress 标示程序忙,但用户仍然可以与程序交互 CSS 鼠标样式 cursor属性[通俗易懂]
wait 标示程序忙,用户需要等待直到程序不忙为止 CSS 鼠标样式 cursor属性[通俗易懂]
cell 标示对象是单元格 CSS 鼠标样式 cursor属性[通俗易懂]
crosshair 简单的十字线光标 CSS 鼠标样式 cursor属性[通俗易懂]
text 标示可编辑的水平文本 CSS 鼠标样式 cursor属性[通俗易懂]
vertical-text 标示可编辑的垂直文本 CSS 鼠标样式 cursor属性[通俗易懂]
alias 标示对象的别名 CSS 鼠标样式 cursor属性[通俗易懂]
copy 标示对象可拷贝 CSS 鼠标样式 cursor属性[通俗易懂]
move 标示对象可被移动 CSS 鼠标样式 cursor属性[通俗易懂]
no-drop 标示被拖起的对象不允许在光标的当前位置被放下 CSS 鼠标样式 cursor属性[通俗易懂]
not-allowed 标示请求的操作不允许被执行 CSS 鼠标样式 cursor属性[通俗易懂]
grab 标示对象可以被抓取 CSS 鼠标样式 cursor属性[通俗易懂]
grabbing 标示对象正在被抓取 CSS 鼠标样式 cursor属性[通俗易懂]
e-resize 标示对象可以向东改变尺寸 CSS 鼠标样式 cursor属性[通俗易懂]
n-resize 标示对象可以向北改变尺寸 CSS 鼠标样式 cursor属性[通俗易懂]
ne-resize 标示对象可以在东北方向改变尺寸 CSS 鼠标样式 cursor属性[通俗易懂]
nw-resize 标示对象可以在西北方向改变尺寸 CSS 鼠标样式 cursor属性[通俗易懂]
s-resize 标示对象可以向南改变尺寸 CSS 鼠标样式 cursor属性[通俗易懂]
se-resize 标示对象可以在东南方向改变尺寸 CSS 鼠标样式 cursor属性[通俗易懂]
sw-resize 标示对象可以在西北方向改变尺寸 CSS 鼠标样式 cursor属性[通俗易懂]
w-resize 标示对象可以被向西改变尺寸 CSS 鼠标样式 cursor属性[通俗易懂]
ew-resize 标示对象可以被水平改变尺寸 CSS 鼠标样式 cursor属性[通俗易懂]
ns-resize 标示对象可以被垂直改变尺寸 CSS 鼠标样式 cursor属性[通俗易懂]
nesw-resize 标示对象可以在东北和西南方向改变尺寸 CSS 鼠标样式 cursor属性[通俗易懂]
nwse-resize 标示对象可以在西北和东南方向改变尺寸 CSS 鼠标样式 cursor属性[通俗易懂]
col-resize 标示对象可以被水平改变尺寸 CSS 鼠标样式 cursor属性[通俗易懂]
row-resize 标示对象可以被垂直改变尺寸 CSS 鼠标样式 cursor属性[通俗易懂]
all-scroll 标示对象允许向四个方向滚动 CSS 鼠标样式 cursor属性[通俗易懂]
zoom-in 标示对象可以被放大 CSS 鼠标样式 cursor属性[通俗易懂]
zoom-out 标示对象可以被缩小 CSS 鼠标样式 cursor属性[通俗易懂]

cursor属性的默认值为 auto, 它表示由浏览器根据当前上下文,自动确定最适合的光标类型。auto 与 default 不同,default 表示使用客户端操作系统默认的光标类型。

从上表可以看出,并非所有的光标类型都得到了支持,对于未支持的类型,则使用默认光标或由浏览器自动确定光标类型。

这显然不能满足所有用户的需求,特别对于一些追求时尚和个性化的Web应用。因此,CSS允许用户创建自己的鼠标光标图片,并保存为 .cur 的光标文件,然后通过 cursor属性来使用它们。如:


  1. cursor: url(cursors/cursor.cur) ;

上述规则表示,要求浏览器加载名称为 cursor.cur 光标文件,并将它用作鼠标光标。当然,浏览器也有可能不支持 .cur 格式的光标文件,或光标文件无法正常加载。因此,大多数浏览器要求必须指定一个备用的光标,否则,cursor属性无效。如:


  1. cursor: url(cursors/cursor.cur), pointer;

使用上述规则,在浏览器不支持 .cur 格式的光标文件,或光标文件无法正常加载时,就会使用 pointer 作为光标。

由于不同浏览器所支持的光标文件格式不尽相同,Opera和IE仅支持 .cur 格式,Firefox、Chrome和Safari既支持 .cur 格式,也支持常见的 .jpg、.gif、.jpg 等格式。因此,CSS还支持同时指定多个光标文件,中间用逗号隔开。如:


  1. cursor: url(cursors/cursor.cur), url(cursors/cursor.png), url(cursors/cursor.gif), pointer;

这样的话,浏览器会逐个查看各个URL,直到找到一个可用的光标文件。如果浏览器无法找到任何可用的文件,就会使用 pointer 作为光标。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/138492.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • petShop_技术架构

    petShop_技术架构.项目概述与架构分析微软刚推出了基于ASP.NET2.0下的PetShop4,该版本有了一个全新的用户界面。是研究ASP.NET2.0的好范例啊,大家都知道,一直以来,在.NET和Java之间争论不休,到底使用哪个平台开发的企业级应用性能最好、结构最优、生产力最高。为了用事实说话,通过对项目各方面的性能评估进而在比较.NET和Java的高下。用户做比较的这个项目就是Pe…

  • 安装vmware一直报缺少dll_vmware安装问题

    安装vmware一直报缺少dll_vmware安装问题MicrosoftRuntimeDLL安装程序未能完成安装不要说什么去打开%temp%,治标不治本,如果后面无法输入密钥的话,两个问题堆在一起根本解决不了。MicrosoftRuntimeDLL安装程序未能完成安装:这个问题的最直接解决办法是服务没打开,打开控制面板-管理工具-服务确认以下两个服务是打开的:WindowsInstaller;WindowsModulesInst…

  • free技术详解 lock_lock free的理解

    free技术详解 lock_lock free的理解转自:http://www.isnowfy.com/understand-to-lock-free/以前一直不明白lockfree是什么,后来发现原来是完全理解错了概念,lockfree看到大家有的翻译为无锁,有的翻译为锁无关,其实用不用锁和lockfree是不相关的,用了锁也可能是lockfree,而不用锁有可能不是lockfree。一个lockfree的解释是一个“锁无关”的程序能…

  • char (*p)[]和char *p[]的区别[建议收藏]

    理解的关键在于:1.[]的优先级高于*,(*p)[]理解为指向一个数组,*(p[])存放指针的数组2. char(*p)[SIZE]:指向一维数组的指针,一维数组只能有SIZE个元素

    2021年12月18日
  • R-L模型算法的优缺点_风筝模型公式

    R-L模型算法的优缺点_风筝模型公式介绍Logistic回归算法,名字虽带有回归,但其实是一个分类模型。输出Y=1的对数几率是由输入x的线性函数表示的模型,直接对分类的可能性进行建模,并不是直接对分类的结果(0或者1)进行建模:假设一个样本属于正样本的概率为p,则:LR模型是在线性回归的基础上,把特征进行线性组合,再把组合的结果通过一层sigmoid函数映射成结果是1或是0的概率。逻辑斯蒂回归模型的特点:…

    2022年10月13日
  • pychar激活码【注册码】「建议收藏」

    pychar激活码【注册码】,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号