移动div内的光标图像

我开始开发一个狙击游戏，但我发现在div内移动狙击图像时遇到了麻烦我的主要目标是当鼠标移过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内的图像？

enter image description here

来源

2013-06-01 Sora

我不建议用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-01 09:10:56

此属性的基本（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-01 08:32:29 sroes

我可以更改狙击图像的宽度和高度吗？ – Sora

不，我不认为你可以（不是没有调整图像本身）。将jpg设置为光标在IE（某些版本）中似乎也不起作用。更可靠的解决方案可能是隐藏光标并在mousemove上使用Javascript定位。 – sroes

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

来源

2013-06-01 08:34:36

移动div内的光标图像

回答

相关问题