【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("图片地址");}    //设置对象为图片

2、部分cursor样式效果图

 

时间: 2024-10-26 07:59:25

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

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

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

CSS cursor 属性 (不同光标)

CSS 参考手册 实例 一些不同的光标: span.crosshair {cursor:crosshair;} span.help {cursor:help;} span.wait {cursor:wait;} 亲自试一试 浏览器支持 IE Firefox Chrome Safari Opera           所有主流浏览器都支持 cursor 属性. 注释:Opera 9.3 和 Safari 3 不支持 url 值. 注释:任何版本的 Internet Explorer (包括 IE8

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样式

参考来源:W3SCHOOL 有时我们需要在CSS布局时设定特定的鼠标指针样式,这时可以通过设定cursor来实现: url: 需使用的自定义光标的 URL. 注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标; default: 默认光标(通常是一个箭头); auto: 默认.浏览器设置的光标; crosshair: 光标呈现为十字线; pointer: 光标呈现为指示链接的指针(一只手); move: 此光标指示某对象可被移动; e-resize: 此光标指示矩形

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

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