[英]moving a cursor image inside a div
我開始開發狙擊手游戲,但我發現在 div 內移動狙擊手圖像時遇到了麻煩,我的主要目標是當鼠標懸停在 div 上時,我想將其圖像更改為狙擊手圖像,這就是我所做的:
<center>
<div id="field" class="cursor1">
</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內移動圖像?
我不建議用 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 元素來渲染圖形。
此屬性的基本 (CSS 2.1) 語法是:
cursor: [<url>,]* keyword
這意味着可以指定零個或多個 URL(以逗號分隔),其后必須跟隨 CSS 規范中定義的關鍵字之一,例如 auto 或 pointer。
所以你應該提供一個回退值:
.cursor
{
cursor:url("sniper.jpg"), auto;
}
#field:hover
{
cursor:url("sniper.jpg") ;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.