cursor说明 写道
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('绝对路径的图片(格式: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冲突么?
http://www.w3school.com.cn/jsref/prop_style_cursor.asp
相关推荐
// return current cursor style relative to document BODY $.cursor('style'); // set current cursor style relative to document BODY $.cursor('position'); // return current cursor position relative to ...
在网页设计中,鼠标样式(Cursor Style)是一个重要的细节元素,它可以增强用户的交互体验和网站的整体视觉效果。本文将深入探讨网页制作中的鼠标样式及其应用。 首先,我们要明白鼠标样式是通过CSS(Cascading ...
.link-style { cursor: pointer; } ``` - **应用场景**:通常应用于超链接、按钮等交互元素,告知用户此处可点击。 2. **crosshair** - **定义**:显示十字线光标,常用于精确选择或瞄准。 - **应用场景**:...
在Normal font设置字体,Character encoding选择UTF8以避免中文乱码,Cursor style可自定义光标样式。 3. **设置默认Session配置**:通过View>Global Options>General>Default Session> Edit default setting,设定...
在网页设计中,CSS(Cascading Style Sheets)是一种用于定义HTML或XML(包括SVG、XHTML等)文档呈现方式的样式表语言。其中,`cursor`属性是CSS中的一个重要特性,它允许开发者自定义鼠标指针在不同元素上显示的...
在HTML中,我们可以使用CSS(Cascading Style Sheets)来修改鼠标指针的样式。`cursor`属性是CSS中的一个关键属性,用于设置元素的光标显示。它可以接受多种预定义的值,如`default`、`pointer`、`text`、`wait`等,...
<a href="#" onmouseover="this.style.cursor='hand'" onmouseout="this.style.cursor='default'" onclick="document.getElementById('ShowContent').innerHTML='';return false;"> 清空屏幕" src="UI/clear.gif" ...
this.style.cursor = "hand"; }, onmouseout=function() { this.style.backgroundColor = bgColor; }) } </style> ``` ### 二、ASP.NET GridView 控件事件处理 接下来的部分涉及到了ASP.NET中的`GridView`...
例如,在HTML中,可以使用`<style>`标签的`cursor`属性,或者在CSS中直接设置元素的`cursor`属性。 4. 动态改变:根据用户行为或程序状态,通过编程动态改变鼠标图标。 “全箭头”作为最基础的鼠标图标,通常用于...
手型style="cursor:hand"> 手型style="cursor:pointer" 十字型style="cursor:crosshair" 文本style="cursor:text" 你好等待style="cursor:wait" 你好默认style="cursor:default" 问号style="cursor:help" 向...
- `cursor`: 自定义鼠标光标形状。 通过学习"CSS style属性大全"这份教程,你可以深入了解并熟练运用这些属性,从而更好地掌控网页的视觉呈现和用户体验。同时,别忘了实践是检验真理的唯一标准,理论学习后要多...
- `cursor`: 改变鼠标指针在元素上的形状。 - `direction`: 设置文本方向,通常用于处理从右到左的语言如阿拉伯语和希伯来语。 此外,还有一些其他属性,如列表、定位、打印、滚动条、表格和文本属性,它们允许更...
"Cursor-Mouse-Style"项目正是这样一个实现此类效果的工具,它允许开发者自定义鼠标光标样式,同时添加延迟功能,使得光标在移动时产生一种追随效果,提升用户的互动感。这种效果常见于艺术化或创新性的网站设计中,...
在前端开发中,CSS(Cascading Style Sheets)是用于控制网页元素样式的重要技术,而“cursor”属性则是CSS中的一个重要部分,它定义了用户在鼠标指针位于元素上时的光标形状。"css-cursor"是一个开源库,专注于规范...
在编程和设计中,我们可以用代码改变鼠标的样式,例如在JavaScript中使用`document.body.style.cursor = 'pointer';`可以将鼠标更改为手型图标,表示可点击的状态。 压缩包内的文件“light_cursor”可能包含了多种...
document.body.style.cursor = 'none'; // 隐藏默认光标 // 创建自定义光标元素 var cursor = document.createElement('div'); cursor.classList.add('custom-cursor'); cursor.style.left = event.clientX +...
在JavaScript的世界里,"Cursor Sparkle Effect using Javascript.zip"是一个有趣的项目,它展示了如何利用JavaScript编程语言来实现鼠标光标闪烁特效。这个项目可能包含一个名为"sparkler"的文件,该文件很可能是...
<任意标签 style="cursor:*;">任意标签> ``` 其中,星号(*)应该被替换为不同的cursor值,以获得期望的鼠标指针效果。 接下来,我们将具体介绍15种不同的cursor值及其效果: 1. **hand**:这个值将鼠标指针改变为...
语言:English 自定义鼠标光标! 将光标更改为可爱的自定义指针 已经创建了四个最可爱的项目,将它们设置为网页的光标。 from从下一个自定义鼠标指针中进行选择::star:简单的蓝色箭头光标:star:火箭鼠标:star:心形...
//obj.style.cursor = "wait"; obj.className = "aa"; } ``` 这个函数原本会改变元素的`style`属性,但已通过注释取消了。现在,它只会在点击时为元素添加`class="aa"`。在实际应用中,这会导致元素的样式根据`....