css属性鼠标指针的使用

不念不忘少年蓝@ 2023-06-13 09:22 15阅读 0赞

今天在项目中，要用到自定义鼠标样式，格式：

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冲突么？

发表评论取消回复

表情：

评论列表（有 0 条评论，15人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS中如何改变鼠标指针样式（cursor）？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ CSS中改变鼠标指针样式（cursor） ⭐ 示例： ⭐ 写在最后 ----------------

柔光的暖阳◎/ 2023年10月15日 10:03/ 0 赞/ 47 阅读

相关鼠标指针

鼠标指针bug: 1、cursor: ; auto默认 crosshair加号 text文本 wait等待 help帮助 progress过程

墨蓝/ 2023年07月14日 08:20/ 0 赞/ 24 阅读

相关 css属性鼠标指针的使用

今天在项目中，要用到自定义鼠标样式，格式： css:\{cursor:url('绝对路径的图片(格式：cur,ico)'),-moz-zoom-out;\}//FF下面

不念不忘少年蓝@/ 2023年06月13日 09:22/ 0 赞/ 16 阅读

相关使用CSS转换属性

CSS | 过渡属性 (CSS | transitions Property) When the CSS property changes the rendered re

矫情吗；*/ 2023年03月05日 12:44/ 0 赞/ 110 阅读

相关使用CSS的pointer-events属性实现鼠标穿透效果

先看效果：使用pointer-events之前：（红色框的是覆盖在表格上面的一个div,淡蓝色单元格是可以点击的而且鼠标是小手的形状，红框覆盖在单元格上面，将淡蓝色单元格盖住，

红太狼/ 2022年12月30日 07:58/ 0 赞/ 52 阅读

相关如何更改鼠标指针

㵘亿期博客 -------------------- 厌倦了系统默认的鼠标指针，觉得自己应该有一番创意性了如何更改鼠标指针 1.找到设置![在这里插入图片描述][

客官°小女子只卖身不卖艺/ 2022年12月06日 12:48/ 0 赞/ 252 阅读

相关 css鼠标样式

<table> <thead> <tr> <th>css</th> <th>说明</th> </tr> </thead> <tbody>

心已赠人/ 2022年11月26日 01:58/ 0 赞/ 202 阅读

相关 CSS鼠标手势

[CSS鼠标手势][CSS] 复制打开页面 http://static-d5f74b19-46ea-41cc-9a0d-0771e4b026d7.bspapp.co

Bertha 。/ 2022年10月18日 01:29/ 0 赞/ 171 阅读

相关 CSS_19种鼠标指针光标样式

示例 <div style="cursor: move;">123</div> auto ：标准光标 default ：标准箭头 hand ：手形光标 wai

我不是女神ヾ/ 2022年09月12日 01:00/ 0 赞/ 871 阅读

相关 css 鼠标样式

css样式中鼠标形状的改变是通过cursor属性来决定的，如下所示： cursor: auto、hand、pointer、crosshair、default、text、v

小灰灰/ 2022年07月17日 02:27/ 0 赞/ 219 阅读