自定义CSS光标单击点

alen0pnh  于 2022-12-20  发布在  其他
关注(0)|答案(4)|浏览(145)

我怎样给cursor: url(theCursorUrl);创建的光标一个自定义的点击点?例如,你用一个手(抓取)图像作为光标,但是你希望图像的中间是实际光标指向的点。

sulc1iza

sulc1iza1#

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

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

其中两个6值分别表示从左到上的6个像素。默认热点始终是图像的左上角,即0 0
浏览器对这个特性的支持可能很差,因为它是一个CSS3特性,所以你还不应该依赖它。(也就是说,Firefox从1.5版本开始就支持它了!)如果浏览器不能解释坐标,cursor属性将被忽略,所以要小心。
2022年编辑:到目前为止,除了一些未知的浏览器和移动的浏览器之外,所有浏览器都应该支持这个特性。(see caniuse

ecbunoof

ecbunoof2#

如果希望定制游标具有跨浏览器兼容性,这是一个相当微妙的问题(热点不在左上角时),首先IE限制你使用.cur格式,.cur格式也封装了热点位置,你可以编辑.cur格式(有一些免费的工具,比如真实的世界光标编辑器)来设置热点像素。不幸的是,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
h22fl7wq

h22fl7wq3#

基本语法如下所示:

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

然而,有一些怪癖要注意,使它相当棘手的跨浏览器工作。
最主要的一点是Internet Explorer要求光标为.cur格式,而其他浏览器要求光标为标准图像格式(如. gif)。如果你想支持所有浏览器,你需要创建这两种格式,并编写浏览器特定的代码。
显然在歌剧中根本行不通。
Quirksmode site拥有所有可能发生的怪事的全部细节。

6kkfgxo0

6kkfgxo04#

CSS 3热点定位,但IE https://developer.mozilla.org/en/Using_URL_values_for_the_cursor_property不支持

cursor: url(cursor.gif) 2 2, pointer;
property: url x-coordinate y-coordinate, fallback image;

相关问题