移動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內的光標圖像

回答

相關問題