CSS 属性 cursor 手势设置(琐碎知识点整理)

作者: 黑木令 | 来源:发表于2021-05-23 23:25 被阅读0次

CSS 属性 cursor 手势设置(琐碎知识点整理)
CSS overflow 属性(琐碎知识点整理)
CSS cursor 属性
web前端入门到实战：CSS中的cursor属性
css的 cursor 属性
CSS cursor属性演示
jquery的设置多个 CSS 属性
jQuery中的DOM操作
CSS cursor 和 opacity 属性
CSS background背景

之前有整理过一部分知识点, 一直没有发布, 因为都是有关 CSS 方面的零散内容; 现在想想无论做什么都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给你们, 现在看到感觉还挺有意思。

cursor 属性规定要显示的光标的类型（形状）。

该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状（不过 CSS2.1 没有定义由哪个边界确定这个范围）。

1. 常用取值

1. pointer (手)           --> cursor: pointer;
2. crosshair (十字线)     -->  cursor: crosshair;
3. default (箭头)         --> cursor: default;

2. url 属性所使用详解

body{ 
  // 默认光标状态
  cursor:url(http://baidu.com/favicon.ico), auto;
} 

body:active{
  // mousedown 的光标状态
  cursor:url(http://img/favicon.png), auto;
}

建议：
1. 图片地址最好绝对路径, 相对路径也可以 。
2. 图片大小最好是 32*32 的大小, 要是比这个尺寸大在各个浏览器下面解析的大小不一样 。
3. 图片格式为 .ico 兼容性最好 。

3. 全部取值

url	需使用的自定义光标的 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	此光标指示可用的帮助（通常是一个问号或一个气球）。