文档章节

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

lotozhou
 lotozhou
发布于 2015/12/10 13:53
字数 809
阅读 8934
收藏 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
粉丝 8
博文 51
码字总数 51524
作品 0
苏州
程序员
Google Chrome最强鼠标手势插件面世

泡泡网 2009年07月17日 类型:原创 作者:陈涛 编辑:陈涛 Google Chrome推出之后,其优秀的网页浏览速度和JavaScript执行能力受到了无数用户的青睐。但是对于很多用户来说,插件也非常重要,特...

晨曦之光
2012/03/09
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
iOS开发系列--触摸事件、手势识别、摇晃事件、耳机线控

-- iOS事件全面解析 概览 iPhone的成功很大一部分得益于它多点触摸的强大功能,乔布斯让人们认识到手机其实是可以不用按键和手写笔直接操作的,这不愧为一项伟大的设计。今天我们就针对iOS的...

jianxin160
2015/08/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

day122-20181020-英语流利阅读-待学习

蜘蛛侠新片《毒液》来袭!导演灵感来自哪? Roxy 2018-10-20 1.今日导读 你还记得漫威宇宙中飞檐走壁的蜘蛛侠小可爱吗?在刚过去的国庆黄金周里,索尼影业发行的漫威超级英雄蜘蛛侠系列大片《...

飞鱼说编程
19分钟前
2
0
美团点评Docker容器管理平台

美团点评容器平台简介 本文介绍美团点评的Docker容器集群管理平台(以下简称“容器平台”)。该平台始于2015年,是基于美团云的基础架构和组件而开发的Docker容器集群管理平台。目前该平台为...

Skqing
25分钟前
2
0
JDK8笔记

判断两个对象是否相等 Objects.equals(value1, value2)

呼呼南风
今天
1
0
OSChina 周六乱弹 —— 到底谁是小公猫……

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子:分享Trivium的单曲《Throes Of Perdition》 《Throes Of Perdition》- Trivium 手机党少年们想听歌,请使劲儿戳(这里) @小鱼丁:...

小小编辑
今天
364
5
基础选择器

注意:本教程参考自网上流传的李兴华老师的jquery开发框架视频,但是苦于没有相应的配套笔记,由我本人做了相应的整理. 本次学习的内容 学习jquery提供的各种选择器的使用,掌握了jquery选择...

江戸川
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部