在div内移动光标图像

Question

我开始开发一个狙击手游戏，但我发现在div中移动狙击手图像时遇到麻烦我的主要目标是当鼠标在div上时我想将它的图像更改为狙击手图像，这就是我所做的： / p>

<center>
    <div id="field" class="cursor1">
        &nbsp;
    </div>
</center>

<script type="text/javascript">
    $(document).ready(function() {
        $("#field").mouseover(function() {
            $(this).addClass("cursor");

        });
    });
</script>
<style type="text/css">
    #field
    {
        width:300px;
        height:300px;
        border:1px solid;
    }
    .cursor
    {
        cursor:url("sniper.jpg") ;
    }
</style>

但这不起作用。如何在div中移动图像？

Answer 1

我不建议用css设置你的鼠标图像，因为它更容易调整图像大小并使用实际图像替换鼠标光标使其居中。

$('#box').mouseenter(function(){ 
    $('img').css('display','block');
});

$('#box').mouseleave(function(){ 
    $('img').css('display','none');
});

$("#box").mousemove(function(event) {
    $('img').css('left',event.pageX-20);
    $('img').css('top',event.pageY-20);
});

我做了一个简单的例子http://jsfiddle.net/N9pu4/

还可以考虑使用canvas元素渲染图形。

Answer 2

此属性的基本（CSS 2.1）语法是：

cursor:  [<url>,]* keyword

这意味着可以指定零个或多个URL（以逗号分隔），必须后面跟随CSS规范中定义的关键字之一，例如auto或pointer。

（见https://developer.mozilla.org/en-US/docs/Web/CSS/cursor/url?redirectlocale=en-US&redirectslug=CSS%2Fcursor%2Furl）

所以你应该提供一个后备值：

.cursor
{
    cursor:url("sniper.jpg"), auto;
}

Answer 3

#field:hover
{ 
cursor:url("sniper.jpg") ;
}