Пользовательская точка взаимодействия с курсором - CSS / JQuery

Question

Я пытаюсь использовать пользовательский курсор для онлайн-игры, в данном случае это снайперский прицел.

Проблема в том, что когда я ссылаюсь на курсор с помощью CSS, точка взаимодействия по-прежнему остается в верхнем левом углу значка, тогда как для курсора он должен быть мертвой точкой значка.

Вот курсор:

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

Вот демоверсия: http://jsfiddle.net/9kNyF/

Если вы поместите красную точку от курсора на красную точку, которую я создал в демоверсии, она не вызовет событие щелчка. Вы должны попытаться навести на него верхний левый угол.

Если вы установите курсор обратно на cursor:default;, вы увидите, что событие щелчка срабатывает очень хорошо, это просто вопрос "наведения" курсора.

Игра написана на JQuery, так что, если мне нужно добавить туда какую-то логику для смещения курсора или чего-то плохого, пусть будет так. В идеале я хочу, чтобы это было исправлено CSS.

Спасибо!

Answer 1

Вам просто нужно указать точку доступа <x> и <y> в вашем CSS:

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

http://jsfiddle.net/9kNyF/15/ видите?

Answer 2

независимо от того, какой инструмент вы использовали для создания курсора, должна быть опция для управления целевой областью щелчка. Вы будете гоняться за хвостом в поисках решения javascript / css.

Answer 3

Поскольку это событие не срабатывает, попробуйте разместить его вокруг слушателя событий.

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