HTML光标样式

HTML光标样式

把你的光标放到相应文字上鼠标显示效果 
 cursor:auto;   自动
 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>
时间: 2024-11-09 00:31:47

HTML光标样式的相关文章

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

我们在DIV CSS布局时候,我们会遇到对对象内鼠标指针光标进行控制,比如鼠标经过指针变为手指形状等样式,接下来我们介绍鼠标指针样式cursor控制.系统默认鼠标指针样式外,可以通过CSS设置图片为鼠标指针,常见有些网站鼠标指针是各种各样小图片样式,当然这个是通过css cursor设置鼠标样式. 详见网站介绍:http://www.divcss5.com/rumen/r427.shtml css cursor鼠标指针光标样式default pointer hand url,布布扣,bubuko

JQueryUI-拖动(Draggable)-光标样式

定义和用法 当拖拽对象时定位光标.默认情况下,光标是出现在被拖拽对象的中间.使用 cursorAt 选项来指定相对于 draggable 的另一个 位置(指定一个相对于 top.right.bottom.left 的像素值).通过提供一个带有有效的 CSS 光标值的 cursor 选项,来自 定义光标的外观 示例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta h

用图片替代cursor光标样式

鼠标光标样式有限,可参考http://css-cursor.techstream.org/,自定义光标样式可用设置cursor:url('xxx.cur',auto;),可是老是不生效,不知什么原因.那怎么办呢?还有一种办法,就是用图片替代鼠标光标,下面就介绍如何使用之. 1.制作光标图片(ps等工具),注意不要用白底,用透明底,透明底一般为gif或者png格式图片. 图1 我做的箭头图片32*32px 2.用一个span标签包含图片 <span id="cursorLRArrow&quo

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

在前端开发中,我们经常需要对对象鼠标指针光标进行控制,比如鼠标经过超链接时变成手指形状.在这里整理一下cursor鼠标指针光标样式的知识,记录与方便以后查找. 1.常用cursor光标 1 div( cursor:default;} //默认正常鼠标指针 2 div( hand;}和div( cursor:text;} //文本选择效果 3 div( cursor:move;} //移动选择效果 4 div( cursor:pointer;} //手指形状 5 div( cursor:url("

CSS中cursor 鼠标指针光标样式(形状)

在前端开发中,我们经常需要对对象鼠标指针光标进行控制,比如鼠标经过超链接时变成手指形状.在这里整理一下cursor鼠标指针光标样式的知识,记录与方便以后查找. 常用cursor光标 url 需使用的自定义光标的 URL. 注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标. default 默认光标(通常是一个箭头)auto 默认.浏览器设置的光标.crosshair 光标呈现为十字线.pointer 光标呈现为指示链接的指针(一只手)move 此光标指示某对象可被

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

测试环境是chrome浏览器 Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.132 Safari/537.36 css样式 div { cursor:url('1.jpg'),pointer; } HTML <body> <div style="width:100px;height:100px;background-color:red;">

Android EditText 光标样式设置

android不同手机对于edittext光标显示样式不一,所以如果设置不同手机显示一样的效果呢,统一设置一个样式就可以了,示例代码如下: <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:textCursorDrawable="@drawable/color_cursor"/> 样式文件: <?xm

用Css定义不同的鼠标光标样式

系统光标大家再熟悉不过了,熟悉的甚至忘了它们的存在.用CSS我们可以将这些光标一一展现出来,本例将展现给大家用CSS实现拖动符的光标.链接小手.移动光标.带问号的光标.不可操作的光标.小手光标.带运行符的光标.上下拖动的光标.普通打字光标.竖向排行的文字光标.系统忙的光标等. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh

html鼠标光标样式

1 <span style="cursor:pointer">手形</span> 2 <span style="cursor:crosshair">十字</span> 3 <span style="cursor:text" >文本光标</span> 4 <span style="cursor:wait" >等待</span> 5 &