在CSS中如何利用cursor自定义鼠标形状
Admin 2022-07-16 群英技术资讯 934 次浏览
很多朋友都对“在CSS中如何利用cursor自定义鼠标形状”的内容比较感兴趣,对此小编整理了相关的知识分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获,那么感兴趣的朋友就继续往下看吧!css中能把cursor变成抓手样的形状,注意不是超链接的那种手,是抓手
css:{cursor:url('绝对路径的图片(格式:cur,ico)'),-moz-zoom-out;}//FF下面
css:{cursor:url('绝对路径'),auto;}//IE,FF,chrome浏览器都可以
例子
| 代码如下 | |
.style1{ |
|
补充:
问题一 浏览器不兼容问题:
在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冲突么
注意:url:需使用的自定义光标的 URL。图片类型需要是.cur或.ani格式的 但小编使用jpg的并没发现什么问题。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
CSS中怎样实现页面禁止复制?有时候我们不想要让别人直接复制我们网站的内容,那么有什么方法可以禁止复制呢?这里我们使用user-select属性,可以规定是否能够选取元素的内容,下面我们具体看看怎样实现。
实现的原来就是:在一个宽高为0像素的块状元素中设置border属性,例如.box{width:0px;height:0;border-bottom:50px#F00solid;border-left:50px#03Fsolid;border-right:50px#F90solid;border-top:50px#6C0solid;}在浏览器中的显示如图:这样就有上下左右四个三角形了,再把除了要用的三角外的其他3个三角(border)颜色设置 ...
本篇文章主要的想大家介绍了关于HTML5 section标签和div标签的区别,section和div的用法看似相近,实则差的也不是太多,有些地方可以相互转换都行,但有些地方只能用section或者只能用div,不能转换的,好了,接下来就让我们一起看文章吧
使用css3中animation属性如何实现流光按钮效果?我们知道css3中animation属性是css3动画效果中常见的属性,因此使用这个属性我们能够实现很多酷炫的效果,下面小编就给大家分享如何使用animation属性实现鼠标停在按钮上有流光按钮效果的代码。
方法:1、利用“position:absolute”样式将图片元素设置为绝对定位样式;2、利用clip属性来截取绝对定位样式的图片即可,语法为“图片元素{clip:rect(top,right,bottom,left);}”。
成为群英会员,开启智能安全云计算之旅
立即注册关注或联系群英网络
7x24小时售前:400-678-4567
7x24小时售后:0668-2555666
24小时QQ客服
群英微信公众号
CNNIC域名投诉举报处理平台
服务电话:010-58813000
服务邮箱:service@cnnic.cn
投诉与建议:0668-2555555
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 ICP核准(ICP备案)粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008