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

发布于 2024-11-27 07:10:28 字数 516 浏览 0 评论 0原文

我正在尝试在在线游戏中使用自定义光标，在本例中它是狙击瞄准镜。

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

这是光标：

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

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

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

如果您将光标设置回cursor:default;您会看到点击事件正常触发，这只是“瞄准”光标的问题。

游戏是用 JQuery 编码的，所以如果我需要为光标偏移或蹩脚的东西添加一些逻辑，那就这样吧。理想情况下，我希望这是一个 CSS 修复。

谢谢！

原文

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

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.

Here's the cursor:

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

Here's a demo: 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.

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.

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.

Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

清秋悲枫 2024-12-04 07:10:28

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

在您的示例中，中心恰好距离顶部 24px/向左（巨大的光标光标哈哈）

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

http://jsfiddle.net/9kNyF/15/ 看到了吗？

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

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/ see?

回复收藏 0 原文

浅浅淡淡 2024-12-04 07:10:28

只要它不触发点击事件，请尝试将其放置在事件侦听器周围。

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

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

<div id="crosshairs"></div>
<script>
$(function(){
    $("body").mousemove(function(e){
        var CrossHairWidth = $('#crosshairs').width();
        var CrossHairHeight = $('#crosshairs').height();
        $('#crosshairs').css('top', e.pageY - (CrossHairHeight / 2));
        $('#crosshairs').css('left', e.pageX - (CrossHairWidth / 2) );
    });
});
</script>

然后隐藏光标，执行如下操作：
光标：url(http://www.seancannon.com/_test/transparent.png)，默认；

As far as it not firing the click event try placing this around your event listener.

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

With the centering of the cross hairs it might be easier to use a div with the background of the image and using jQuery to place the div over your cursor in the correct place.

<div id="crosshairs"></div>
<script>
$(function(){
    $("body").mousemove(function(e){
        var CrossHairWidth = $('#crosshairs').width();
        var CrossHairHeight = $('#crosshairs').height();
        $('#crosshairs').css('top', e.pageY - (CrossHairHeight / 2));
        $('#crosshairs').css('left', e.pageX - (CrossHairWidth / 2) );
    });
});
</script>

You then hide the cursor doing something like so:
cursor: url(http://www.seancannon.com/_test/transparent.png), default;

回复收藏 0 原文