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 ...
随机推荐
- 在WPF中使用依赖注入的方式创建视图
在WPF中使用依赖注入的方式创建视图 0x00 问题的产生 互联网时代桌面开发真是越来越少了,很多应用都转到了浏览器端和移动智能终端,相应的软件开发上的新技术应用到桌面开发的文章也很少.我之前主要做W ...
- 工欲善其事,必先利其器 之 VS2013全攻略(安装,技巧,快捷键,插件)!
如有需要WPF工具的朋友可以移步 工欲善其事,必先利其器 之 WPF篇: 随着开发轨迹来看高效WPF开发的工具和技巧 之前一篇<c++的性能, c#的产能?!鱼和熊掌可以兼得,.NET NATI ...
- 一步一步使用ABP框架搭建正式项目系列教程
研究ABP框架好多天了,第一次看到这个框架的名称到现在已经很久了,但由于当时内功有限,看不太懂,所以就只是大概记住了ABP这个名字.最近几天,看到了园友@阳光铭睿的系列ABP教程,又点燃了我内心要研究 ...
- Js 变量声明提升和函数声明提升
Js代码分为两个阶段:编译阶段和执行阶段 Js代码的编译阶段会找到所有的声明,并用合适的作用域将它们关联起来,这是词法作用域的核心内容 包括变量声明(var a)和函数声明(function a(){ ...
- 使用etree.HTML的编码问题
title: 使用etree.HTML的编码问题 date: 2015-10-07 17:56:47 categories: [Python] tags: [Python, lxml, Xpath] ...
- Opserver开源的服务器监控系统(ASP.NET)
Opserver是Stack Exchange下的一个开源监控系统,系统本身由C#语言开发的ASP.NET(MVC)应用程序,无需任何复杂的应用配置,入门很快.下载地址:https://github. ...
- .NET设计模式访问者模式
一.访问者模式的定义: 表示一个作用于某对象结构中的各元素的操作.它使你可以在不改变各元素类的前提下定义作用于这些元素的新操作. 二.访问者模式的结构和角色: 1.Visitor 抽象访问者角色,为该 ...
- IT持续集成之质量管理
研发工具生态 质量相关工作 一次编译产出测试包与上线包 !从源头保证版本的⼀一致性!代码质量控制! 全⽅方位的⾃自动化测试体系保证! 提测冒烟效率! 全⾃自动上线流程杜绝⼈人⼯工犯错! 生产环境应⽤用 ...
- MyBatis源码分析(二)语句处理器
StatementHandler 语句处理器,主要负责语句的创建.参数的设置.语句的执行.不负责结果集的处理. Statement prepare(Connection connection, Int ...
- 常用 meta 整理
<!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 --> <meta name="HandheldFriendly" con ...