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

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

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

这是光标：

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

这是一个演示： http ： //jsfiddle.net/9kNyF/

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

如果将光标设置回cursor:default; 你会看到点击事件发射得很好，这只是“瞄准”光标的问题。

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

谢谢！

您只需要在CSS中提供热点的和位置：

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

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

只要不触发click事件，请尝试将其放在事件监听器周围。

 $(function(){ $('#point').click(function(){ alert('clicked point'); }); });

通过十字准线的居中，可能更容易使用带有图像背景的div，并使用jQuery将div放在光标的正确位置。

然后你可以隐藏光标，如下所示： cursor: url(http://www.seancannon.com/_test/transparent.png), default;

无论您用于创建光标的工具是什么，都应该有一个用于管理点击目标区域的选项。你会追逐你的尾巴寻找一个javascript / css解决方案。