2

我开始开发一个狙击手游戏，但我发现在 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 内移动图像？

在此处输入图像描述

4

3 回答 3

3

我不建议使用 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 元素来渲染图形。

于 2013-06-01T09:10:56.397 回答
0

此属性的基本 (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;
}
于 2013-06-01T08:32:29.313 回答
0 
#field:hover
{ 
cursor:url("sniper.jpg") ;
}
于 2013-06-01T08:34:36.040 回答