自定义光标交互点 - CSS/JQuery

Question

我正在尝试使用自定义光标进行在线游戏,在这种情况下,它是一个狙击范围.

问题是当我通过CSS引用光标时,交互点仍然是图标的左上角,而它需要是光标图标的死角,才有意义.

这是光标:

cursor:url(http://www.seancannon.com/_test/sniper-scope.cur),default;

如果您将光标上的红点放在我在演示中创建的红点上,它将不会触发click事件.你必须尝试将左上角对准它.

如果你把光标设置回来,cursor:default;你会看到点击事件发射得很好,这只是"瞄准"光标的问题.

游戏是用JQuery编写的,所以如果我需要在那里添加一些逻辑偏移或者某些蹩脚的东西,那就这样吧.理想情况下,我希望这是一个CSS修复.

谢谢!

Answer 1

您只需要在CSS中提供热点<x>和<y>位置:

在你的例子中,中心恰好是从顶部/左侧24px in(巨大的屁股光标lol)

cursor:url(http://www.seancannon.com/_test/sniper-scope.cur) 24 24,default;