自定义CSS光标单击点。

| 如何为由cursor: url(theCursorUrl);创建的游标赋予自定义点击点？例如您正在使用手（抓图）图像作为光标。但是，您希望图像的中间是实际光标指向的点。

已邀请:

4 个回复

CSS3支持设置光标图像的中点，其中指针的热点（即注册点击的点）为：

cursor: url(mycur.cur) 6 6, auto;

其中两个“ 2”值分别表示从左侧开始的6个像素和从顶部开始的6个像素。默认热点始终是图像的左上角，即0 0。浏览器对此功能的支持可能很差，尽管它是CSS3功能，所以您现在还不应该依赖它。（也就是说，Firefox从1.5版本开始支持它！）如果浏览器无法解释坐标，则将忽略cursor属性，因此请小心。

嗜蒂谷尘旱

如果您希望自定义游标具有跨浏览器兼容性（当热点不在左上角时），这是一个相当棘手的问题。首先，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

恋卡

基本语法如下：

cursor: url(image) [x y|auto];

但是，有许多需要注意的怪癖使得使用跨浏览器非常棘手。主要的一个是Internet Explorer要求光标为\'。cur \'格式，而其他浏览器要求光标为标准图像格式（例如\'。gif \'）。如果要支持所有浏览器，则需要同时创建和编写特定于浏览器的代码。它显然在Opera中根本不起作用。 Quirksmode网站提供了所有可能发生的怪异事件的完整详细信息。

才脊烽馈低

CSS 3热点定位，但是IE不支持 https://developer.mozilla.org/en/Using_URL_values_for_the_cursor_property 游标：url（cursor.gif）2 2，指针; 属性：网址x坐标y坐标，后备图片；

要回复问题请先登录或注册

自定义CSS光标单击点。

4 个回复

发起人

css

cursor

问题状态

自定义CSS光标单击点。

与内容相关的链接

4 个回复

发起人

css

cursor

问题状态