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,ico这三种格式,FF支持bmp,gif,jpg,cur,ico这几种格式,不支持ani格式,也不支持gif动画格式,因此来说一般将图片存为cur或ico格式比较好,如果是ani格式的话,那么可以在FF下面用jpg,gif,bmp来代替(cursor:url(.....ani),url(.....gif),auto)

还有几个需要注意的地方:1.图片地址为绝对路径,2.图片大小最好是32*32的大小,反正在各个浏览器下面解析的大小不一样

Cursor:url()的使用:

cursor: url(),pointer;

url:需使用的自定义光标的 URL。图片类型需要是.cur或.ani格式的。(这次项目中我是用的.ico格式,并没有发现浏览器兼容问题)

pointer: 默认的鼠标光标样式,当没有找到可用的定义光标时会使用此光标。

最近项目中有用到设置鼠标光标为自定义图片的特效,在使用Cursor:url()的过程中遇到了很多问题。

问题一 浏览器不兼容问题:

在FF火狐中可以很正常的显示出来,而在IE中起初是显示不出来,后来是鼠标图片大小过小的问题,在Google浏览器中鼠标图片的大小问题更加的突出——超级的大。

碰到的情况正好和baidu到的结果相反,很多朋友遇到的问题都是不兼容FF浏览器。

对于在浏览器中鼠标图片不显示的问题,问题大概出在对鼠标图片URL路径的引用上。 可以分别尝试下绝对和相对路径的引用。

问题二 各浏览器间鼠标图片大小不一致问题:

这种问题应该和各浏览器间对Cursor图片的解析有关系,起初我的鼠标图片大小是59*56的,后来把鼠标图片的尺寸改为32*32后,图片大小不一致的问题就解决了。

(经测试发现,超过32*32尺寸,就会出现这种问题)

问题三 IE中使用Cursor URL()出现鼠标闪动问题:

当对设置Cursor URL()的容器元素添加了Title或Alt时,就会出现这种现象。最后很无奈的把Title标签去掉了。难道是因为在IE中Cursor会和Title、Alt冲突么?

css Cursor:url()自定义鼠标指针样式为图片的更多相关文章

  1. cursor url 自定义鼠标样式

    cursor可以自定义鼠标,写法是cursor:url(“图片路径”),pointer; url:需使用的自定义光标的 URL.图片类型需要是.cur或.ani和jpg,png等格式的(.cur或.a ...

  2. CSS cursor 属性改变鼠标的样式

    可能的值 值 描述 url 需使用的自定义光标的 URL. 注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标. default 默认光标(通常是一个箭头) auto 默 ...

  3. css cursor url用法格式详解

    css cursor url用法格式:css:{cursor:url('图标路径'),auto;} //IE,FF,chrome浏览器都可以 实例代码:html{cursor: url("h ...

  4. [WPF]自定义鼠标指针

    原文:[WPF]自定义鼠标指针 [WPF]自定义鼠标指针 周银辉 看看WPF Cursor类的两个构造函数吧:  * f));            g.Flush();            g.D ...

  5. 006-unity3d GUI初识、贴图、自定义鼠标指针

    一.gui概念 无论摄像机拍摄到的图像怎么变换,GUI永远显示在屏幕上,不受变形.碰撞.光照的影响.对话框.战斗值.能量等.示例:用手机录像,摄像的参数不会随着拍摄场景变换.GUI基础GUI部分是每帧 ...

  6. Mac更换鼠标指针样式_mousecape教程

    mousecape项目介绍 这是github上的一个项目,作者是alexzielenski. 项目是用于修改Mac系统鼠标样式的,支持动态鼠标样式. 该项目停止更新于2014年,目前仍可以被较新的系统 ...

  7. Mac更换鼠标指针样式_ANI、CUR文件解析

    前情提要 因为之前写了一篇mousecape的博客有一些回应,所以我决定写个续.主要是教大家怎么把cur文件和ani文件插入到mousecape里面,顺便提供几个做好的cape文件. 先给大家推荐一个 ...

  8. CSS如何实现自定义鼠标应用到整个网页

    在CSS区把body改为*即可.但是注意Firefox不支持ani和cur文件,如果您一定想使用ani和cur的指针,可以试着将它改名为.gif文件.实际测试如果改为gif则IE也不支持了.

  9. 自定义鼠标Cursor转变成图片

    今天无意做到项目遇到一个好玩的事情,就是当我鼠标移到一个链接上面,并不是像正常那样出现一个小手,而是变成一个小十字架, 下面看图当时第一眼看到总感觉哪里不对,噢噢噢噢 这样的 小手没了,居然是一个图片 ...

随机推荐

  1. 联想G480安装CentOS电缆驱动器

    最近.联想G480 32本机安装现场CentOS 6.5. 发现.总是无法使用有线网络. 必须安装必要的驱动,搜集了资料,安装过程例如以下: 1. 必备的软件 安装前,须要下列的软件依赖包. sudo ...

  2. python抓取网络内容

    最近想做研究互联网来获取数据,只是有一点python,让我们来看一个比较简单的实现. 例如,我想抓住奥巴马的每周演讲http://www.putclub.com/html/radio/VOA/pres ...

  3. 编程算法 - 数丑陋 代码(C)

    数丑陋 代码(C) 本文地址: http://blog.csdn.net/caroline_wendy 题目: 我们把仅仅包括因子2, 3 和 5的数称作丑数. 求按从小到大的顺序的第5个丑数. 能够 ...

  4. Xamarin.Forms 初探

    什么是 Xamarin Forms ? Xamarin Forms 是一个高效创建跨平台用户界面的库 .通过Xamarin Forms 能够一次编码生成基于主流移动平台(iOS, Android, W ...

  5. zoj 3823 Excavator Contest(结构体)

    题目链接:zoj 3823 Excavator Contest 题目大意:一个人开着挖掘机要在N*N的格子上面移动.要求走全然部的格子.而且转完次数要至少为n*(n-1) - 1次, 而且终点和起点必 ...

  6. springMVC3得知(五岁以下儿童)--MultiActionController

    Spring为了提供一个多动作控制器,您可以使用它的几个行动统一到一个控制器,这可以放在一起功能. 多动作控制器存在在一个单独的包中--org.springframework.web.mvc.mult ...

  7. hdu 游乐场

    Problem Description   小时候,因为家里经济困难,小明从未去过游乐场,所以直到现在,他还心存遗憾.  最近,杭州刚建了一座游乐场,为了弥补儿时的遗憾,小明带了一笔钱迫不及待地要去体 ...

  8. hdu 质方数

    Problem Description   小明天生对数字比较敏感,3岁的时候就能背诵圆周率一百位. 现在,小明慢慢长大了,但依然很喜欢数字,最近,他迷上了质数和平方数,并且自己把质数的平方命名为“质 ...

  9. SQL中条件放在on后与where后的区别

    SQL中on条件与where条件的区别 数据库在通过连接两张或多张表来返回记录时,都会生成一张中间的临时表,然后再将这张临时表返回给用户. 在使用left jion时,on和where条件的区别如下: ...

  10. jquery 元素控制(附加元素/其他内容)引进和应用

    一个.在内部元素/外部附加元件 append,prepend:加入到该子元素  before,after:元素加入 html: <div id="content"> 在 ...