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光标样式的更多相关文章

  1. 第七十六节,css颜色和透明度,盒子阴影和轮廓,光标样式

    css颜色和透明度,盒子阴影和轮廓,光标样式 学习要点: 1.颜色和透明度 2.盒子阴影和轮廓 3.光标样式 一.颜色和透明度 颜色我们之前其实已经用的很多了,比如字体颜色.背景颜色.边框颜色.但除了 ...

  2. 用图片替代cursor光标样式

    鼠标光标样式有限,可参考http://css-cursor.techstream.org/,自定义光标样式可用设置cursor:url('xxx.cur'),auto;.还有一种办法,就是用图片替代鼠 ...

  3. 【css】cursor鼠标指针光标样式知识整理

    在前端开发中,我们经常需要对对象鼠标指针光标进行控制,比如鼠标经过超链接时变成手指形状.在这里整理一下cursor鼠标指针光标样式的知识,记录与方便以后查找. 1.常用cursor光标 div( cu ...

  4. NotePad++中如何改变光标样式(转换横着和竖着)?

    在键盘上找 Insert ,按这个Insert就可以把横向闪烁光标( _ )修改成竖向闪烁光标样式( | )

  5. CSS使用自定义光标样式-遁地龙卷风

    测试环境是chrome浏览器 Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357. ...

  6. 鼠标指针光标样式css cursor default pointer hand url

    一.cursor语法与结构 1.cursor语法:cursor : auto | crosshair | default | hand | move | help | wait | text | w- ...

  7. CSS表单3 光标样式 (每个位置鼠标放上去的样式不同)

    <!DOCTYPE html> <html>     <head>         <title>单选按钮对齐</title>        ...

  8. 设置Sublime Text 3的光标样式

    升级了Sublime Text 3,结果光标变成了这个样子,非常不习惯: 查了文档http://www.sublimetext.com/3 ,Build 3059中得描述: Added setting ...

  9. 对span设置鼠标光标样式

    <html> <body> <p>请把鼠标移动到单词上,可以看到鼠标指针发生变化:</p> <span style="cursor:au ...

随机推荐

  1. Ajax 概念 分析 举例

    Ajax是结合了访问数据库,数据访问,Jquery 可以做页面局部刷新或者说是页面不刷新,我可以让页面不刷新,仅仅是数据的刷新,没有频繁的刷页面,是现在比较常用的一种方式做页面那么它是怎么实现页面无刷 ...

  2. java EE设计模式简介

    1.何为设计模式 设计模式提供了对常见应用设计问题的解决方案.在面向对象的编程中,设计模式通常在解决与对象创建和交互相关的问题,而非整体软件架构所面对的大规模问题,它们以样板代码的形式提供了通用的解决 ...

  3. 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 数据库 ...

  4. PowerShell过滤文件中的重复内容

    Get-Content -Path E:\test11\data.txt | Sort-Object | Get-Unique 源文件: AA0001 2014-06-30 15:27:13.073 ...

  5. cesium核心类Viewer简介

    1.简单描述Viewer Viewer类是cesium的核心类,是地图可视化展示的主窗口,cesium程序应用的切入口,扮演必不可少的核心角色. 官网的英文解析如下: A base widget fo ...

  6. Android的Kotlin秘方(II):RecyclerView 和 DiffUtil

    作者:Antonio Leiva 时间:Sep 12, 2016 原文链接:http://antonioleiva.com/recyclerview-diffutil-kotlin/ 如你所知,在[支 ...

  7. git远程库GitHub

    首先,注册一个GitHub(github.com)帐号,免费获得Git远程仓库 由于本地Git仓库和GitHub仓库之间的传输是通过SSH加密的,所以,需要一点设置: 第1步:创建SSH Key.在用 ...

  8. 怎样在Dos里切换盘符

    一:在Dos里切换盘符 a:在电脑左下角右击显示图片;(我用的是win10系统,其他系统类似) b:点击运行,输入cmd; c:点击确定: d:输入盘符:(如f:) 或F: 只写字母,不写分号是不行的 ...

  9. VIM教程

    vim 的环境设定参数 :set nu :set nonu             就是设定与取消行号啊! :set hlsearch :set nohlsearch     hlsearch 就是 ...

  10. 08讲browse命令的使用技巧

    .浏览所有parts ,使用技巧 .浏览所有 nets,使用技巧 在上图中选择nets .浏览所有 offpage connector,使用技巧 如上 .浏览所有 DRC makers,使用技巧 5. ...