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,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()自定义鼠标指针样式为图片的更多相关文章
- cursor url 自定义鼠标样式
cursor可以自定义鼠标,写法是cursor:url(“图片路径”),pointer; url:需使用的自定义光标的 URL.图片类型需要是.cur或.ani和jpg,png等格式的(.cur或.a ...
- CSS cursor 属性改变鼠标的样式
可能的值 值 描述 url 需使用的自定义光标的 URL. 注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标. default 默认光标(通常是一个箭头) auto 默 ...
- css cursor url用法格式详解
css cursor url用法格式:css:{cursor:url('图标路径'),auto;} //IE,FF,chrome浏览器都可以 实例代码:html{cursor: url("h ...
- [WPF]自定义鼠标指针
原文:[WPF]自定义鼠标指针 [WPF]自定义鼠标指针 周银辉 看看WPF Cursor类的两个构造函数吧: * f)); g.Flush(); g.D ...
- 006-unity3d GUI初识、贴图、自定义鼠标指针
一.gui概念 无论摄像机拍摄到的图像怎么变换,GUI永远显示在屏幕上,不受变形.碰撞.光照的影响.对话框.战斗值.能量等.示例:用手机录像,摄像的参数不会随着拍摄场景变换.GUI基础GUI部分是每帧 ...
- Mac更换鼠标指针样式_mousecape教程
mousecape项目介绍 这是github上的一个项目,作者是alexzielenski. 项目是用于修改Mac系统鼠标样式的,支持动态鼠标样式. 该项目停止更新于2014年,目前仍可以被较新的系统 ...
- Mac更换鼠标指针样式_ANI、CUR文件解析
前情提要 因为之前写了一篇mousecape的博客有一些回应,所以我决定写个续.主要是教大家怎么把cur文件和ani文件插入到mousecape里面,顺便提供几个做好的cape文件. 先给大家推荐一个 ...
- CSS如何实现自定义鼠标应用到整个网页
在CSS区把body改为*即可.但是注意Firefox不支持ani和cur文件,如果您一定想使用ani和cur的指针,可以试着将它改名为.gif文件.实际测试如果改为gif则IE也不支持了.
- 自定义鼠标Cursor转变成图片
今天无意做到项目遇到一个好玩的事情,就是当我鼠标移到一个链接上面,并不是像正常那样出现一个小手,而是变成一个小十字架, 下面看图当时第一眼看到总感觉哪里不对,噢噢噢噢 这样的 小手没了,居然是一个图片 ...
随机推荐
- 网站的SEO以及它和站长工具的之间秘密(转)
博客迁移没有注意 URL 地址的变化,导致百度和 google 这两只爬虫引擎短时间内找不到路.近段时间研究了下国内最大搜索引擎百度和国际最大搜索引擎google的站长工具,说下感受. 百度的站长工具 ...
- NPOI以及在ASP.NET MVC中的使用
NPOI以及在ASP.NET MVC中的使用 1.前言 相信大家在工作中经常要遇到一些导入导出Execl操作.学习贵在分享,分享使人快乐,园子里的前辈已经有很多好的文章,鄙人也是能力有限,在这里把这些 ...
- cocos2d-x 网络请求
[cocos2dx]rapidjson用法以及中文显示的解决方法 cocos2dx 读取json及解析 cocos2dx rapidjson 高速解析JSON --- [cocos2d-x官方文档] ...
- 【iOS】MD5数据加密和网络安全
在做网络应用程序时,, 始终把确保用户数据的安全性, 因此要加密. MD5算法在国内用的非常多. MD5算法的特点: *相同的数据加密结果是一样的.(32个字符) *不可逆的.(不能逆向解密) *可 ...
- oracle之sql语句优化
oracle之sql语句优化 sql语句的优化 1.在where子句中使用 is null 或 is not null 时,oracle优化器就不能使用索引了. 2.对于有连接的列,即使最有一个是静态 ...
- 网络资源(4) - extJS视频
2014_08_24 http://v.youku.com/v_show/id_XMjk2ODc0MjA4.html?f=7183617 extJS视频教程04——ExtJS框架入门
- [Unity3D]Unity3D游戏开发MatchTarget的作用攀登效果实现
大家好,我是秦培,欢迎关注我的博客.我的博客地址blog.csdn.net/qinyuanpei. 今天我们来一起学习在Unity3D中怎样实现角色攀爬效果. 在RPG游戏中,某些游戏场景经常须要玩家 ...
- C# -- 把json字符串转为对象并读取各属性的值
前面2种方法是不需要声明一个Json字符串的类型即可把Json字符串转换为Dictionary对象 而第3种方法则是声明一个Json字符串的强类型对象,然后反序列化为该对象的数据. List<, ...
- 左右JAVA示例代码事件分发和监督机制来实现-绝对原创有用
文章标题:左右JAVA示例代码事件分发和监督机制来实现 文章地址: http://blog.csdn.net/5iasp/article/details/37054171 作者: javaboy201 ...
- Java设计模式偷跑系列(21)建模和实现享受metapatterns
转载请注明出处:http://blog.csdn.net/lhy_ycu/article/details/40021651 享元模式(Flyweight):运用共享的技术有效地支持大量细粒度的对象. ...