HTML光标样式

时间：2022-09-18 23:37:03

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颜色和透明度&comma;盒子阴影和轮廓&comma;光标样式

    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&plus;&plus;中如何改变光标样式（转换横着和竖着）？

    在键盘上找 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 光标样式 &lpar;每个位置鼠标放上去的样式不同&rpar;

    <!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. 每个程序员都会的 35 个 jQuery 小技巧

    1. 禁止右键点击 $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return ...

  2. Could not create the view&colon; An unexpected exception was thrown 【转】

    转:http://blog.csdn.net/shuangzixing520/article/details/35225105 今天打开Myeclipse10的时候,发现server窗口出现一堆问题, ...

  3. IOS 设备参数

    Iphone,Ipad,ITouch 各个型号参数对比

  4. hdu 2425 Hiking Trip

    题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=2425 Hiking Trip Description Hiking in the mountains ...

  5. android 开发 制作弹出等待进度条

    技术点: dialog:ProgressBar:animated-rotate: 弹出框: import com.carspeak.client.R; import android.app.Dialo ...

  6. JavaScript XML 兼容处理，序列化和反序列化以及回调事件

    浏览器中XML DOM的支持 IE中通过ActiveXObject实现了XML的支持,存在一下几个版本:Microsoft.XmlDom,MSXML2.DOMDocument,MSXML2.DOMDo ...

  7. javascript常用开发笔记：一个简单强大的js日期格式化方法

    前言:一直没找到好用的javascript日期格式化工具,自己写了一个,方便以后复用 1.主要功能 (1)支持任意顺序的日期格式排列:yyyy=年,MM=月,dd=日,HH=时,mm=分,ss=秒,s ...

  8. Webdriver之API详解&lpar;1&rpar;

    说明 Webdriver API详解,基于python3,unittest框架,driver版本和浏览器自行选择. 本内容需要对python3的unittest框架有一个简单的了解,这里不再赘述,不了 ...

  9. Java中静态变量与实例变量

    知识回顾 上一篇总结了java中成员变量和局部变量的区别,这一篇将总结静态变量和实例变量的一些特性和区别. 示例代码 package Variable; public class VariableDe ...

  10. 计算属性（computed）、方法（methods）和侦听属性（watch）的区别与使用场景

    1,computed 能实现的,methods 肯定也能够实现. 2,不同之处在于,computed 是基于他的依赖进行缓存的,computed 只有在他的的相关依赖发生改变的时候才会重新计算. 如果 ...

相关文章