自定义光标交互点 - CSS / JQuery [英] Custom cursor interaction point - CSS / JQuery

问题描述

我想为网络游戏使用自定义光标，在这种情况下，它是一个狙击镜。

I'm trying to use a custom cursor for an online game, in this case it's a sniper scope.

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

The problem is when I reference the cursor via CSS, the interaction point is still the top left of the icon, whereas it needs to be dead center of the icon for the cursor to make any sense.

这里是光标：

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

以下是演示： http://jsfiddle.net/9kNyF/

如果你将光标的红点放在我在演示中创建的红点上，它赢了点击事件。你必须尝试瞄准它的左上角。

If you put the red dot from the cursor over the red dot I created in the demo, it won't fire the click event. You have to attempt to aim the top left corner at it.

如果您将光标设置为 cursor：default; ，您将看到点击事件触发很好，它只是一个瞄准光标的问题。

If you set the cursor back to cursor:default; you'll see the click event fires just fine, it's just a matter of "aiming" the cursor.

游戏是在JQuery中编码的，所以如果我需要添加一些逻辑，为游标偏移或一些跛脚，它。理想情况下，我希望这是一个CSS修复。

The game is coded in JQuery so if I need to add some logic there for cursor offset or something lame, so be it. Ideally I want this to be a CSS fix.

谢谢！

推荐答案

您只需提供热点的< x> 和< y> 位置：

You just need to provide the hotspot's <x> and <y> position in your CSS:

在你的示例中，中心从顶部/左边开始是24px。

In your example, the center happens to be 24px in from the top/left (huge ass cursor lol)

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

http： //jsfiddle.net/9kNyF/15/ 看？

这篇关于自定义光标交互点 - CSS / JQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！