CSS光标cursor
2016-03-14 11:14
627 查看
×
目录
[1]定义 [2]标准样式 [3]拓展样式 [4]私有样式 [5]定义样式 [6]常见应用
值: [<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
应用于: 所有元素
继承性: 有
[注意]所有拓展样式IE7-浏览器都不支持
[注意]safari将-webkit-grab和-webkit-grabbing都解释为default
[注意]使用URL自定义样式,后面必须跟有一个逗号和某个通用关键字
元素的title属性用来提供元素的额外信息,配合help光标可以得到更好的表现方式
// var all = document.getElementById('cnblogs_post_body').children;
var select = [];
for(var i = 1; i < all.length; i++){
if(all[i].getAttribute('id')){
if(all[i].getAttribute('id').match(/anchor\d/)){
select.push(all[i]);
}
}
}
var wheel = function(e){
e = e || event;
var data;
if(e.wheelDelta){
data = e.wheelDelta;
}else{
data = -e.detail * 40;
}
for(var i = 0; i < select.length; i++){
if(select[i].getBoundingClientRect().top > 0){
return;
}
if(select[i].getBoundingClientRect().top <= 0 && select[i+1]){
if(select[i+1].getBoundingClientRect().top > 0){
change(oCon.children[i+2])
}
}else{
change(oCon.children[select.length+1])
}
}
}
document.body.onmousewheel = wheel;
document.body.addEventListener('DOMMouseScroll',wheel,false);
var oCon = document.getElementById("content");
var close = oCon.getElementsByTagName('span')[0];
close.onclick = function(){
if(this.innerHTML == '显示目录'){
this.innerHTML = '×';
this.style.background = '';
oCon.style.border = '2px solid #ccc';
oCon.style.width = '';
oCon.style.height = '';
oCon.style.overflow = '';
oCon.style.lineHeight = '30px';
}else{
this.innerHTML = '显示目录';
this.style.background = '#3399ff';
oCon.style.border = 'none';
oCon.style.width = '60px';
oCon.style.height = '30px';
oCon.style.overflow = 'hidden';
oCon.style.lineHeight = '';
}
}
for(var i = 2; i < oCon.children.length; i++){
oCon.children[i].onmouseover = function(){
this.style.color = '#3399ff';
}
oCon.children[i].onmouseout = function(){
this.style.color = 'inherit';
if(this.mark){
this.style.color = '#3399ff';
}
}
oCon.children[i].onclick = function(){
change(this);
}
}
function change(_this){
for(var i = 2; i < oCon.children.length; i++){
oCon.children[i].mark = false;
oCon.children[i].style.color = 'inherit';
oCon.children[i].style.textDecoration = 'none';
oCon.children[i].style.borderColor = 'transparent';
}
_this.mark = true;
_this.style.color = '#3399ff';
_this.style.textDecoration = 'underline';
_this.style.borderColor = '#2175bc';
}
// ]]>
目录
[1]定义 [2]标准样式 [3]拓展样式 [4]私有样式 [5]定义样式 [6]常见应用
前面的话
在浏览器中,光标对于提供交互反馈很有用。通过在不同的场景中改变光标,就能赋予其不同的含义。定义
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: 帮助指针
拓展样式
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
私有样式
有些浏览器还提供了增加浏览器前缀的私有样式[注意]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>
// var all = document.getElementById('cnblogs_post_body').children;
var select = [];
for(var i = 1; i < all.length; i++){
if(all[i].getAttribute('id')){
if(all[i].getAttribute('id').match(/anchor\d/)){
select.push(all[i]);
}
}
}
var wheel = function(e){
e = e || event;
var data;
if(e.wheelDelta){
data = e.wheelDelta;
}else{
data = -e.detail * 40;
}
for(var i = 0; i < select.length; i++){
if(select[i].getBoundingClientRect().top > 0){
return;
}
if(select[i].getBoundingClientRect().top <= 0 && select[i+1]){
if(select[i+1].getBoundingClientRect().top > 0){
change(oCon.children[i+2])
}
}else{
change(oCon.children[select.length+1])
}
}
}
document.body.onmousewheel = wheel;
document.body.addEventListener('DOMMouseScroll',wheel,false);
var oCon = document.getElementById("content");
var close = oCon.getElementsByTagName('span')[0];
close.onclick = function(){
if(this.innerHTML == '显示目录'){
this.innerHTML = '×';
this.style.background = '';
oCon.style.border = '2px solid #ccc';
oCon.style.width = '';
oCon.style.height = '';
oCon.style.overflow = '';
oCon.style.lineHeight = '30px';
}else{
this.innerHTML = '显示目录';
this.style.background = '#3399ff';
oCon.style.border = 'none';
oCon.style.width = '60px';
oCon.style.height = '30px';
oCon.style.overflow = 'hidden';
oCon.style.lineHeight = '';
}
}
for(var i = 2; i < oCon.children.length; i++){
oCon.children[i].onmouseover = function(){
this.style.color = '#3399ff';
}
oCon.children[i].onmouseout = function(){
this.style.color = 'inherit';
if(this.mark){
this.style.color = '#3399ff';
}
}
oCon.children[i].onclick = function(){
change(this);
}
}
function change(_this){
for(var i = 2; i < oCon.children.length; i++){
oCon.children[i].mark = false;
oCon.children[i].style.color = 'inherit';
oCon.children[i].style.textDecoration = 'none';
oCon.children[i].style.borderColor = 'transparent';
}
_this.mark = true;
_this.style.color = '#3399ff';
_this.style.textDecoration = 'underline';
_this.style.borderColor = '#2175bc';
}
// ]]>
相关文章推荐
- css实现高度不固定的div元素模块在页面中水平垂直居中
- @import
- CSS实现垂直居中的常用方法
- 浅谈各种浏览器下的CSS Hack兼容性写法
- 【读书笔记】CSS3学习(三)
- CSS体系总结
- 纯CSS3打造属于自己的“小黄人”
- CSS总结2
- 浏览器兼容性问题解决方案之CSS——已在IE、FF、Chrome测试
- CSS利用伪元素实现导航栏斜线分隔
- 初始化css状态
- 你值得拥有的CSS下拉菜单效果
- 纯css3实现斑马线repeating-linear-gradient和linear-gradient的妙用
- css实现居中的方法
- 一步步教大家编写酷炫的导航栏js+css实现
- css控制段落效果
- css控制文字属性
- css各种手型集合(css禁止手型)
- css各种手型集合(css禁止手型)
- css各种手型集合(css禁止手型)