CSS-cursor属性与用法总结

零下一度
Lepaskan: 2017-06-09 11:36:34
asal
3344 orang telah melayarinya

cursor 属性规定要显示的光标的类型(形状)。该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状(不过 CSS2.1 没有定义由哪个边界确定这个范围)。

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

1. CSS-cursor 属性

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

1487307780452597.png

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;}
Salin selepas log masuk

解析:前面的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|}
Salin selepas log masuk

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

相关问答:

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

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

【相关推荐】

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

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

Atas ialah kandungan terperinci CSS-cursor属性与用法总结. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!