CSS鼠标指针cursor样式

参考来源:W3SCHOOL

有时我们需要在CSS布局时设定特定的鼠标指针样式,这时可以通过设定cursor来实现:

url: 需使用的自定义光标的 URL。

注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标;

default: 默认光标(通常是一个箭头);

auto: 默认。浏览器设置的光标;

crosshair: 光标呈现为十字线;

pointer: 光标呈现为指示链接的指针(一只手);

move: 此光标指示某对象可被移动;

e-resize: 此光标指示矩形框的边缘可被向右(东)移动;

ne-resize: 此光标指示矩形框的边缘可被向上及向右移动(北/东);

nw-resize: 此光标指示矩形框的边缘可被向上及向左移动(北/西);

n-resize: 此光标指示矩形框的边缘可被向上(北)移动;

se-resize: 此光标指示矩形框的边缘可被向下及向右移动(南/东);

sw-resize: 此光标指示矩形框的边缘可被向下及向左移动(南/西);

s-resize: 此光标指示矩形框的边缘可被向下移动(南);

w-resize: 此光标指示矩形框的边缘可被向左移动(西);

text: 此光标指示文本;

wait: 此光标指示程序正忙(通常是一只表或沙漏);

help: 此光标指示可用的帮助(通常是一个问号或一个气球);

例如:<span style="cursor:auto">

在线测试:在线测试地址

时间: 2024-12-21 02:14:19

CSS鼠标指针cursor样式的相关文章

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

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

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

【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 鼠标指针光标样式(形状)

url 需使用的自定义光标的 URL. 注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标. default 默认光标(通常是一个箭头) auto 默认.浏览器设置的光标. crosshair 光标呈现为十字线. pointer 光标呈现为指示链接的指针(一只手) move 此光标指示某对象可被移动. e-resize 此光标指示矩形框的边缘可被向右(东)移动. ne-resize 此光标指示矩形框的边缘可被向上及向右移动(北/东). nw-resize 此光标指示

鼠标指针cursor的多种状态介绍

hand是手型 pointer也是手型,这里推荐使用这种,因为这可以在多种浏览器下使用. crosshair是十字型 text是移动到文本上的那种效果 wait是等待的那种效果 default是默认效果 help是问号 e-resize是向右的箭头 ne-resize是向右上的箭头 n-resize是向上的箭头 nw-resize是向左上的箭头 w-resize是向左的箭头 sw-resize是左下的箭头 s-resize是向下的箭头 se-resize是向右下的箭头 auto是由系统自动给出效

css Cursor:url()自定义鼠标指针样式为图片

css自定义鼠标指针样式为图片Cursor:url()的使用,今天在项目中,要用到自定义鼠标样式,格式: css:{cursor:url('绝对路径的图片(格式:cur,ico)'),-moz-zoom-out;}//FF下面 css:{cursor:url('绝对路径'),auto;}//IE,FF,chrome浏览器都可以 前面url是自定义鼠标格式,图像的绝对路径地址,后面的参数是css标准的cursor样式,(IE下面可以不需要) 图标的格式根据不同的浏览器来分:IE支持cur,ani,

修改鼠标指针样式

在编写html时,有时我们需要修改鼠标指针的样式,比较形象的有qq农场的指针样式,如果我们自定义也可以实现该效果.大家可以通过修改css样式cursor来实现. cursor取值: auto : 默认值.浏览器根据当前情况自动确定鼠标光标类型. all-scroll : IE6.0 有上下左右四个箭头,中间有一个圆点的光标.用于标示页面可以向上下左右任何方向滚动. col-resize : IE6.0 有左右两个箭头,中间由竖线分隔开的光标.用于标示项目或标题栏可以被水平改变尺寸. crossh

CSS样式:cursor -----定义鼠标指针

定义和用法 cursor 属性规定要显示的光标的类型(形状). 该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状(不过 CSS2.1 没有定义由哪个边界确定这个范围). 可能的值: demo: <html> <head>     <style type="text/css">        span{               line-height: 30px;             }     </style>  <

CSS自定义鼠标指针样式

原文链接: http://davidwalsh.name/css-custom-cursorDemo地址: http://davidwalsh.name/demo/css-custom-cursor.php原文日期: 2014-09-16翻译日期: 2014-09-17翻译人员: 铁锚 还记得Web 1.0时代的那些苦逼岁月吗? 你想尽一切办法来优化你的网站. 还要饱受IE6惨无人道的虐待,举个栗子, IE中那些害死人不偿命的滚动条, 我一直记得第三方类库 CometCursor. CometC