在div中移动光标图像

Question

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

<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(以逗号分隔)，这些URL必须后跟CSS规范中定义的关键字之一，例如或。

(参见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") ;
}