Question

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

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

这是光标：

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

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

如果您将光标上的红点放在我在演示中创建的红点上，它将不会触发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;

http://jsfiddle.net/9kNyF/15/见？

Answer 2

如果没有触发click事件，请尝试将其放在事件监听器周围。

$(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>

然后隐藏光标，执行以下操作： cursor: url(http://www.seancannon.com/_test/transparent.png), default;

Answer 3

您用于创建光标的任何工具都应该有一个用于管理点击目标区域的选项。你会在寻找javascript / css解决方案。

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

3 个答案: