自定义CSS光标点击点

use*_*071 16 css cursor

如何为创建的游标提供自定义点击cursor: url(theCursorUrl);?例如,你正在使用手(抓)图像作为光标.但是你希望图像的中间是实际光标指向的点.

Bol*_*ock 27

CSS3支持设置光标图像的中点,其中指针的热点(即点击注册点)是:

cursor: url(mycur.cur) 6 6, auto;
Run Code Online (Sandbox Code Playgroud)

其中两个6值分别表示左起6个像素和顶部6个像素.默认热点始终是图像的左上角,即0 0.

浏览器对此功能的支持可能相当差,因为它是一个CSS3功能,所以它不是你应该依赖的东西.(也就是说,火狐已经从1.5版本支持它!)如果浏览器无法解释的坐标,cursor属性将被忽略,所以要小心.


Rad*_*scu 7

如果您想要自定义光标的跨浏览器兼容性(当热点不在左上角时),这是一个相当棘手的问题.首先,IE受限于使用.cur格式..cur格式还封装了热点位置.您可以编辑.cur格式(有像Real World Cursor Editor这样的免费工具)来设置热点像素.不幸的是,chrome因为某些原因忽略了.cur格式的封装热点,并且默认将它设置为0,0.所以你必须提供这些坐标,但这会使IE忽略整个css属性......

使用除0,0以外的热点的自定义游标时,我的方法是:

首先使用.cur编辑器将热点像素设置在所需坐标(本例中为9,7).然后使用下面的东西.这将涵盖IE,FF和Chrome

cursor:url(mycursor.cur), default;
cursor:url(mycursor.cur) 9 7, default; /*chrome cursor hotspot fix - ignored by IE
Run Code Online (Sandbox Code Playgroud)