CSS光标cursor_html/css_WEB-ITnose

php中文网
发布: 2016-06-24 11:24:12
原创
1416人浏览过

× 目录 [1]定义 [2]标准样式 [3]拓展样式 [4]私有样式 [5]定义样式 [6]常见应用

前面的话

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

 

定义

  cursor光标

  值: [,]*[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: 自定义光标的URLdefault: 默认光标,通常是一个箭头auto: 浏览器自动识别的光标crosshair : 十字线pointer: 手型指针move: 移动指针e-resize: 向东移动指针ne-resize: 向东北移动指针nw-resize: 向西北移动指针n-resize: 向北移动指针se-resize: 向东南移动指针sw-resize: 向西南移动指针s-resize: 向南移动指针w-resize: 向西移动指针text: 文本指针wait: 指示程序正忙help: 帮助指针
登录后复制

拓展样式

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

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

慧中标AI标书
慧中标AI标书

慧中标AI标书是一款AI智能辅助写标书工具。

慧中标AI标书 120
查看详情 慧中标AI标书

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-textcursor:no-dropcursor:not-allowedcursor:all-scrollcursor:ew-resizecursor:ns-resizecursor:nesw-resizecursor:nwse-resizecursor:col-resizecursor:row-resize
登录后复制

私有样式

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

  [注意]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;    
登录后复制

自定义样式

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

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

//错误cursor: url('m.cur');//正确cursor: url('m.cur'),auto;
登录后复制

常见应用

  链接的默认光标是手型指针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>
登录后复制

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号