在CSS中如何利用cursor自定义鼠标形状
Admin 2022-07-16 群英技术资讯 445 次浏览
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进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
最近,在CodePen上看到这样一个非常有意思的效果:这个效果的核心难点在于气泡的一种特殊融合效果。其源代码在:CodePenDemo--Goeyfooter,作者主要使用的是SVG滤镜完成的该效果,感兴趣的可以戳源码看看。其中,要想灵活运用SVG中的feGaussian...
这篇文章主要介绍了CSS flex-basis 文本溢出问题的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
这篇文章主要介绍了深入理解CSS中的vertical-align属性和基线问题,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
在css中,可以给图片元素添加“图片元素{animation:名称 时间}@keyframes 名称{0%{opacity:1;}99%{opacity:1;}100%{opacity:0;}}”样式,实现图片出现一秒后消失效果。
本篇文章给大家介绍一下CSS3中的逻辑选择器,聊聊里面的 4 名成员,希望对大家有所帮助!
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008