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

之前有整理过一部分知识点, 一直没有发布, 因为都是有关 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 此光标指示可用的帮助(通常是一个问号或一个气球)。

如果对你有所帮助,希望大家喜欢点个关注,;整理知识点不易, 每次都是在工作繁忙之余夜深人静之时整理, 每次整理时都在思考如何让大家更容易理解, 更容易找到、看到自己想看到的内容; 无论知识点是大是小, 我都会验证后再分享, 以防自己发表的文章给大家造成误导。如有问题还望不吝赐教,本人会及时更改。(如需转载,请注明出处)。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 定义和用法 cursor 属性规定要显示的光标的类型(形状)。 该属性定义了鼠标指针放在一个元素边界范围内时所用的...
    KK_boy阅读 214评论 0 0
  • 在网页布局的时候,在特定的地方,光标形状各有区别。这个时候,就需要用到css的cursor属性。根据自身需要选择设...
    weiqinl阅读 3,719评论 0 0
  • text-overflow(当块容器<‘overflow’>为非visible时,定义内联内容溢出其块容器是否截断...
    Leophen阅读 281评论 0 0
  • 作用 cursor属性定义当光标放在一个元素的边界内时,光标的样式。有时我们需要动态的变化光标样式时就需要这个属性...
    lilom阅读 2,360评论 0 1
  • 大概是平时做的demo样式都没有太大的复杂性,有些css样式没有对其太多的管制,最近抽时间复下习css,总结了一些...
    琉璃元宝阅读 1,276评论 0 0