视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
CSS-cursor属性与用法总结
2020-11-27 18:51:19 责编:小采
文档
cursor 属性规定要显示的光标的类型(形状)。该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状(不过 CSS2.1 没有定义由哪个边界确定这个范围)。

我们在DIV CSS布局时候,我们会遇到对对象内鼠标指针光标进行控制,比如鼠标经过指针变为手指形状等样式,接下来我们介绍鼠标指针样式cursor控制。系统默认鼠标指针样式外,可以通过CSS设置图片为鼠标指针,常见有些网站鼠标指针是各种各样小图片样式,当然这个是通过css cursor设置鼠标样式。

1. CSS-cursor 属性

cursor 属性规定要显示的光标的类型(形状)

2. css cursor url用法格式详解

css cursor url用法格式:css:{cursor:url('图标路径'),auto;} //IE,FF,chrome浏览器都可以

实例代码:

html{cursor: url("ued.taobao.com/blog/wp-content/themes/taobaoued/images/cursor.ico"),auto;}

解析:前面的url是自定义鼠标图标路径,第2个参数auto是css标准的cursor样式,可换成其它属性(如pointer/default等)!

3. cursor 鼠标样式?

auto: 正常鼠标

crosshair: 十字鼠标

default: 默认鼠标

pointer: 点状鼠标(hand,写两个是为了照顾IE5,它只认hand。)

move: 移动鼠标

4. 关于cursor设置图片问题

几个需要注意的地方:1.图片地址为绝对路径,2.图片大小最好是32*32的大小,反正在各个浏览器下面解析的大小不一样

5. css cursor 鼠标形状

url 需使用的自定义光标的 URL。

注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。

default 默认光标(通常是一个箭头)

auto 默认。浏览器设置的光标。

crosshair 光标呈现为十字线。

pointer 光标呈现为指示链接的指针(一只手)

move 此光标指示某对象可被移动。

6. 详解CSS中cursor属性实例代码

CSS之cursor属性

今天学习了CSS的cursor属性,第一篇博客就用来总结它吧。

cursor属性用于控制光标的显示样式,可取的值有这些:

cursor:url()*|
{auto|default|pointer|crosshair|text|vertical-text|help|not-allowed|no-drop|move|e-reszie|s-resize|w-resize|w-resize|n-resize|all-scroll|ne-resize|se-resize|nw-resize|sw-resize|col-resize|row-resize|}

*表示至少写一个该值,url后面可再选{}内的一个值。

相关问答:

1. javascript - 给元素绑定了window.resize事件之后,之前设置的cursor属性失效了.

2. vim - 映射 可视模式下的<tab> 实现 cursor 在 split 窗口间的切换 ?

【相关推荐】

1. php.cn独孤九贱(2)-css视频教程

2. 将鼠标焦点定位到文本框最后

下载本文
显示全文
专题