文档章节

css手势状态定义属性cursor和自定义鼠标手势详解

lotozhou
 lotozhou
发布于 2015/12/10 13:53
字数 809
阅读 9073
收藏 1

css手势状态定义:cursor和自定义鼠标手势详解,示例演示cursor手势状态如下:

auto : 默认值。浏览器根据当前情况自动确定鼠标光标类型。

all-scroll : 有上下左右四个箭头,中间有一个圆点的光标。用于标示页面可以向上下左右任何方向滚动。

col-resize : 有左右两个箭头,中间由竖线分隔开的光标。用于标示项目或标题栏可以被水平改变尺寸。

crosshair : 简单的十字线光标。

default : 客户端平台的默认光标。通常是一个箭头。

hand : 竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。

move : 十字箭头光标。用于标示对象可被移动。

help : 带有问号标记的箭头。用于标示有帮助信息存在。

no-drop : 带有一个被斜线贯穿的圆圈的手形光标。用于标示被拖起的对象不允许在光标的当前位置被放下。

not-allowed : 禁止标记(一个被斜线贯穿的圆圈)光标。用于标示请求的操作不允许被执行。

pointer : 和 hand 一样。竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。

progress : 带有沙漏标记的箭头光标。用于标示一个进程正在后台运行。

row-resize : 有上下两个箭头,中间由横线分隔开的光标。用于标示项目或标题栏可以被垂直改变尺寸。

text : 用于标示可编辑的水平文本的光标。通常是大写字母 I 的形状。

vertical-text : 用于标示可编辑的垂直文本的光标。通常是大写字母 I 旋转90度的形状。

wait : 用于标示程序忙用户需要等待的光标。通常是沙漏或手表的形状。

*-resize : 用于标示对象可被改变尺寸方向的箭头光标。w-resize | s-resize | n-resize | e-resize | ne-resize | sw-resize | se-resize | nw-resize

url ( url ) : 用户自定义光标。使用绝对或相对 url 地址指定光标文件(后缀为 .cur 或者 .ani )。

自定义手势详解:

一、路径。如果路径写成 url(bg/zoom.cur) 的话,只有最新主流浏览器(IE9等)可以识别,而IE8及以下浏览器不能识别,所以,为了兼容起见,路径统一用最完整的的为好,如 url(http://localhost/www/page/bg/zoom.cur);

二、后缀。虽然CSS2.0上说可以用 gif、jpg等格式图片,但是,又是IE8及以下浏览器不能识别除.cur图标以外的图片格式,所以为了兼容所有浏览器,最好做一张正规的.cur光标图片。

三,逗号。这回相反了,如果不加 ,ponter 最新主流浏览器(IE9等)反而无法识别,IE8及以下低版本浏览器不加 ,ponter  反而可以识别,所以,还是加上 ,ponter  为好。

综上,就是鼠标自定义背景手势的正确用法,使用绝对路径+使用cur光标文件+,ponter,当然这也要工具你的实际兼容情况。



© 著作权归作者所有

lotozhou
粉丝 9
博文 51
码字总数 51524
作品 0
苏州
程序员
私信 提问
加载中

评论(1)

f
freezingsky
ponter -> pointer , 单词拼写问题?
js实现移动端图片预览:手势缩放, 手势拖动,双击放大...

前言 本文将介绍如何通过js实现移动端图片预览,包括图片的 预览模式,手势缩放,手势拖动,双击放大等基本功能;代码地址http://pangyongsheng.github.io/imgPreview/ 查看示例效果: 一、功...

pangyongsheng
2018/10/22
0
0
Chrome鼠标手势扩展--Mouse Stroke

Mouse Stroke的作者是一名ID叫做vigacmoe的用户,这款Chrome扩展功能非常强大,可以分别对导航、窗口、标签、链接、图像、书签以及Chrome中一些实用的功能的操作通过鼠标手势来完成,甚至还可...

匿名
2009/11/26
12.1K
0
React Native开发之动画

博主这个系列的文章 React Native开发之IDE(Atom+Nuclide) React Native开发之FlexBox代码+图解 React Native的Navigator详解 另外,我在Github上建立了一个仓库来搜集优秀的React Nativ...

Yomut
2016/06/29
44
0
【Android游戏开发十七】让玩家自定义手势玩转Android游戏!—Android Gesture之【输入法手势技术】

李华明Himi 原创,转载务必在明显处注明: 转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/android-game/340.html 很多童鞋说我的代码运行后,点击home或者back后会程序异常,...

迷途d书童
2012/03/19
0
0
Flutter widget点击事件和点击态

原文链接 http://tryenough.com/flutter06 跟多教程 http://tryenough.com/type-flutter 你将学到 1.使用Flutter自定义控件,点击态处理 2.Flutter 添加点击手势 3.Flutter 多状态管理 4.一个...

TryEnough
01/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

日志相关---日志配置和过滤器

一、log4j日志简介 1.1、 Loggers 级别和介绍 Loggers组件在此系统中被分为八个级别:ALL、TRANCE、DEBUG、INFO、WARN、ERROR和FATAL、OFF。这八个级别是有顺序的, ##off表示关闭ALL < T...

spinachgit
3分钟前
1
0
六个面试题层层剖析——LongAddr原子类

并发编程面试题 (1)LongAddr的结构是怎样的? (2)当前线程应该访问Cell数组里面的哪一个Cell元素? (3)如何初始化Cell数组? (4)Cell数组如何扩容? (5)线程访问分配的Cell元素有冲...

须臾之余
4分钟前
0
0
MySQL-入门(二)

本部分主要是MySQL的常用函数和高级用法。 一、MySQL排序 排序关键字:order by 排序字段。后面写上要排序字段,排序字段可以有多个,多个采用逗号间隔,order by默认采用升序(asc)排序,可...

潜行-L
15分钟前
0
0
BAM转VCF的方法对比

1 使用GATK HaplotypeCaller #java -jar gatk.jar HaplotypeCaller --native-pair-hmm-threads 4 -R xx.fa -I xx.bam -O xx.vcf --native-pair-hmm-threads用来设置多线程,默认为4线程 2 sa......

悲催的古灵武士
23分钟前
0
0
软件架构设计原则之“KISS”的总结使用

今天聊一聊软件架构设计中的 KISS 原则。 对! 就是亲嘴的那个 “KISS”! 一定要多练习。 ... ... ... ... 作为一个程序员我是推荐理解为“亲嘴”的,可以很好的解决单身问题,但作为一个架...

Owen_Jia
25分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部