本文摘自PHP中文网,作者藏色散人,侵删。
html改变鼠标形状的方法:1、用css的cursor属性来改变鼠标指针形状,代码如“.a{ cursor:hand }”;2、利用第三方控件来改变鼠标指针形状。
本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。
CSS/HTML 改变鼠标指针形状
改变鼠标指针形状的方法有两种;第一种:用css cursor属性来改变鼠标指针形状。另一种是:利用第三方控件的方法,而我自己最常用的是第一种:用css样式表来改变鼠标指针形状
我们先来看第一种:用cursor属性来改变鼠标指针形状。
有些时候我们并不需要文字,图片加链接,而且还想要加链接时的鼠标样式。这就用到了我们的css样式表来鼠标指针形状了。请下面的css鼠标指针css样式表的一些属性:
默认 | default |
文字/编辑 | text |
自动 | auto |
手形 | pointer, hand(hand是IE专有) |
可移动对象 | move |
不允许 | not-allowed |
无法释放 | no-drop |
等待/沙漏 | wait |
帮助 | help |
十字准星 | crosshair |
向上改变大小(North) | n-resize |
向下改变大小(South) | s_resize 与n-resize效果相同 |
向左改变大小(West) | w-resize |
向右改变大小(East) | e-resize 与w-resize效果相同 |
向左上改变大小(NorthWest) | nw-resize |
向左下改变大小(SouthWest) | sw-resize |
向右上改变大小(NorthEast) | ne-resize 与sw-resize效果相同 |
向右下改变大小(SouthEast) | se-resize 与nw-resize效果相同 |
自定义光标 | url('光标地址') |
以上就是改变鼠标指针形状的css样式表。如何应用呢?下面我们用实例来说明一下:
1 2 3 |
|
也可以直接将样式表写在p标签中效果是一样的哟如:
1 |
|
还有一种用法其原理是:利用了CSS2的一个cursor的属性cursor:url (url),鼠标文件可以使用jpg、gif、ani和cur多种文件格式。需要注意的这种方式只能在IE5.5以上浏览器中正常显示。
相关阅读 >>
Html标签legend的具体用法你知道吗?legend标签的属性和使用方法详解
更多相关阅读请进入《Html》频道 >>

Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者