HTML光标样式
HTML光标样式
| cursor:auto; | 自动 |
| cursor:zoom-in; | 放大镜 |
| cursor:zoom-out; | 缩小镜 |
| cursor:all-scroll; | 上下左右任何方向滚动 |
| cursor:crosshair; | 十字准心 |
| cursor:pointer; | 手 |
| cursor:wait; | 等待 |
| cursor:help; | 帮助 |
| cursor:no-drop; | 无法释放 |
| cursor:text; | 文字/编辑 |
| cursor:move; | 可移动对象 |
| cursor:vertical-text; | 可编辑的垂直文本的光标 |
| cursor:n-resize; | 向上改变大小(North) |
| cursor:s-resize; | 向下改变大小(South) |
| cursor:e-resize; | 向右改变大小(East) |
| cursor:w-resize; | 向左改变大小(West) |
| cursor:ne-resize; | 向上右改变大小(North East) |
| cursor:nw-resize; | 向上左改变大小(North West) |
| cursor:se-resize; | 向下右改变大小(South East) |
| cursor:sw-resize; | 向下左改变大小(South West) |
| cursor:col-resize; | 可被水平改变尺寸 |
| cursor:row-resize; | 可被垂直改变尺寸 |
| cursor:not-allowed; | 禁止 |
| cursor:progress; | 处理中 |
| cursor:default; | 系统默认 |
|
cursor:url('#');#为光标文件地址 (注意文件格式必须为:.cur或.ani) |
用户自定义(可用动画) 注意:在定义完自定义的游标之后在末尾加上一般性的游标, 以防那些url所定义的游标不能使用 |
说明:
cursor 属性:设置显示的光标的类型(形状)。
此属性的值可以是多个,其间要用逗号分隔;
假如第一个值无法找到而不能被显示,则第二个值将被尝试使用,依此类推;
假如全部值都不可用的话,则此属性不会发生作用,光标也不会被改变。
比如:{cursor:pointer,wait,help;},从pointer到wait,再到help,如果都没被应用,则cursor属性不起任何作用。
现在举一个“手”光标的例子,写法有两种:
效果图:
| cursor:pointer; | 手 |
第一种是行内样式:(行内样式:将CSS样式编写在标签之中)
<table border="1">
<tr class="pointer" style="cursor:pointer;">
<td>cursor:pointer;</td>
<td>手</td>
</tr>
</table>
第二种是内部样式:(内部样式:由<style>标签定位在<head>之中)
<!-- 这里是style里面的内容 -->
<style type="text/css">
.pointer:hover{
cursor:pointer;
}
</style> <!-- 这里是body里面的内容 -->
<body>
<table border="1">
<tr class="pointer">
<td>cursor:pointer;</td>
<td>手</td>
</tr>
</table>
</body>
HTML光标样式的更多相关文章
- 第七十六节,css颜色和透明度,盒子阴影和轮廓,光标样式
css颜色和透明度,盒子阴影和轮廓,光标样式 学习要点: 1.颜色和透明度 2.盒子阴影和轮廓 3.光标样式 一.颜色和透明度 颜色我们之前其实已经用的很多了,比如字体颜色.背景颜色.边框颜色.但除了 ...
- 用图片替代cursor光标样式
鼠标光标样式有限,可参考http://css-cursor.techstream.org/,自定义光标样式可用设置cursor:url('xxx.cur'),auto;.还有一种办法,就是用图片替代鼠 ...
- 【css】cursor鼠标指针光标样式知识整理
在前端开发中,我们经常需要对对象鼠标指针光标进行控制,比如鼠标经过超链接时变成手指形状.在这里整理一下cursor鼠标指针光标样式的知识,记录与方便以后查找. 1.常用cursor光标 div( cu ...
- NotePad++中如何改变光标样式(转换横着和竖着)?
在键盘上找 Insert ,按这个Insert就可以把横向闪烁光标( _ )修改成竖向闪烁光标样式( | )
- CSS使用自定义光标样式-遁地龙卷风
测试环境是chrome浏览器 Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357. ...
- 鼠标指针光标样式css cursor default pointer hand url
一.cursor语法与结构 1.cursor语法:cursor : auto | crosshair | default | hand | move | help | wait | text | w- ...
- CSS表单3 光标样式 (每个位置鼠标放上去的样式不同)
<!DOCTYPE html> <html> <head> <title>单选按钮对齐</title> ...
- 设置Sublime Text 3的光标样式
升级了Sublime Text 3,结果光标变成了这个样子,非常不习惯: 查了文档http://www.sublimetext.com/3 ,Build 3059中得描述: Added setting ...
- 对span设置鼠标光标样式
<html> <body> <p>请把鼠标移动到单词上,可以看到鼠标指针发生变化:</p> <span style="cursor:au ...
随机推荐
- Ajax 概念 分析 举例
Ajax是结合了访问数据库,数据访问,Jquery 可以做页面局部刷新或者说是页面不刷新,我可以让页面不刷新,仅仅是数据的刷新,没有频繁的刷页面,是现在比较常用的一种方式做页面那么它是怎么实现页面无刷 ...
- java EE设计模式简介
1.何为设计模式 设计模式提供了对常见应用设计问题的解决方案.在面向对象的编程中,设计模式通常在解决与对象创建和交互相关的问题,而非整体软件架构所面对的大规模问题,它们以样板代码的形式提供了通用的解决 ...
- Enterprise Solution 3.1 企业应用开发框架 .NET ERP/CRM/MIS 开发框架,C/S架构,SQL Server + ORM(LLBL Gen Pro) + Infragistics WinForms
行业:基于数据库的制造行业管理软件,包含ERP.MRP.CRM.MIS.MES等企业管理软件 数据库平台:SQL Server 2005或以上 系统架构:C/S 开发技术 序号 领域 技术 1 数据库 ...
- PowerShell过滤文件中的重复内容
Get-Content -Path E:\test11\data.txt | Sort-Object | Get-Unique 源文件: AA0001 2014-06-30 15:27:13.073 ...
- cesium核心类Viewer简介
1.简单描述Viewer Viewer类是cesium的核心类,是地图可视化展示的主窗口,cesium程序应用的切入口,扮演必不可少的核心角色. 官网的英文解析如下: A base widget fo ...
- Android的Kotlin秘方(II):RecyclerView 和 DiffUtil
作者:Antonio Leiva 时间:Sep 12, 2016 原文链接:http://antonioleiva.com/recyclerview-diffutil-kotlin/ 如你所知,在[支 ...
- git远程库GitHub
首先,注册一个GitHub(github.com)帐号,免费获得Git远程仓库 由于本地Git仓库和GitHub仓库之间的传输是通过SSH加密的,所以,需要一点设置: 第1步:创建SSH Key.在用 ...
- 怎样在Dos里切换盘符
一:在Dos里切换盘符 a:在电脑左下角右击显示图片;(我用的是win10系统,其他系统类似) b:点击运行,输入cmd; c:点击确定: d:输入盘符:(如f:) 或F: 只写字母,不写分号是不行的 ...
- VIM教程
vim 的环境设定参数 :set nu :set nonu 就是设定与取消行号啊! :set hlsearch :set nohlsearch hlsearch 就是 ...
- 08讲browse命令的使用技巧
.浏览所有parts ,使用技巧 .浏览所有 nets,使用技巧 在上图中选择nets .浏览所有 offpage connector,使用技巧 如上 .浏览所有 DRC makers,使用技巧 5. ...