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 <span style="cursor:default" >默认</span>
 6 <span style="cursor:help" >问号</span>
 7 <span style="cursor:e-resize" >左右箭头</span>
 8 <span style="cursor:s-resize" >上下箭头</span>
 9 <span style="cursor:auto" >系统自动给出效果</span>
10 <span style="cursor: url(aaa.cur‘);">自定义图标</span>

这个东西很神奇,我们用动态图自定义之后的效果很不错哦!可以让你的页面样式格外的骚!

cursor光标使用
cursor 属性规定要显示的光标的类型(形状),该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状(不过 CSS2.1 没有定义由哪个边界确定这个范围)。

默认值:auto;继承性:yes;版本:CSS2;

JavaScript 语法:object.style.cursor=“crosshair”;

所有主流浏览器都支持 cursor 属性。注:Opera 9.3 和 Safari 3 不支持 url 值,任何版本的 Internet Explorer (包括 IE8)都不支持属性值 “inherit”。

cursor:url() 自定义光标的 URL。可以设置多个,用逗号 , 隔开,第一个加载失败则显示后面的。

css:{cursor:url(图片路径),-moz-zoom-out;}//FF兼容
css:{cursor:url(图片路径),auto;}//IE,FF,chrome浏览器都可以
前面 url() 是自定义鼠标的样式,图像的地址,后面的参数是 css 标准的 cursor 样式,(IE下面可以不需要)

注意:请在此列表的末端始终定义一种普通的光标,如 auto ,以防 URL 定义的光标不可用时无法正常显示光标。

图标的格式根据不同的浏览器来分:IE支持 cur,ani,ico 这三种格式,FF支持 bmp,gif,jpg,cur,ico 这几种格式,所以一般使用 cur 或者 ico 格式的图片。

如果是ani格式的话,可以在FF下面用 jpg,gif,bmp 来代替 (cursor:url(xxx.ani),url(xxx.gif),auto)

图片大小最好是 32*32,反正在各个浏览器下面解析的大小不一样。

IE中使用 cursor url() 出现鼠标闪动问题:当设置 cursor:url() 的容器元素添加了 title 或 alt 时,就会出现这种现象。可以把 title 标签去掉。

原文地址:https://www.cnblogs.com/GGbondLearn/p/12239886.html

时间: 2024-11-09 00:54:04

html鼠标光标样式的相关文章

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

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

用图片替代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自定义鼠标指针样式

原文链接: 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: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,

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鼠标指针光标样式的知识,记录与方便以后查找. 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 此光标指示某对象可被

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

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

自定义鼠标光标cursor

通过css属性 Cursor:url()自定义鼠标光标 {cursor:url('图标路径'),default;} url是自定义鼠标图标路径 default指的是定义默认的光标(通常是一个箭头),以防没有由 URL 定义的可用光标. 图标的格式根据不同的浏览器来分: IE支持cur,ani,ico这三种格式. Google,FF支持bmp,gif,jpg,cur,ico这几种格式,不 支持ani格式,也不支持gif动画格式. 在项目中,用到自定义鼠标样式遇到的问题: IE浏览器下图标地址需要为