jquery替換鼠標光標

Question

我試圖用圖像替換鼠標光標。

我有以下的html：

<div id="content-bg"> 
    <img src="path"/> 
</div> 
<div id="mouse"></div> 

CSS：

#content-bg{ 
    background:url(../img/frontend/content-bg.png) top left no-repeat; 
    width: 968px; 
    height: 552px; 
    position:relative; 
} 

#mouse { 
    cursor: none; 
    width: 75px; 
    height: 76px; 
    background: url("../img/frontend/cross.png") no-repeat center; 
    position: absolute; 
    display:none; 
    top: 0; 
    left: 0; 
    z-index: 10000; 
} 

的javascript：

$(document).ready(function(){ 
    $('#content-bg').mouseout(function(){ 
      $('#mouse').hide(); 
      $(this).css("cursor","none"); 
      return false; 
    }); 
    $('#content-bg').mouseenter(function(){ 
      $('#mouse').show(); 
      return false; 
    }); 
    $('#content-bg').mousemove(function(e){ 
      var x = e.clientX - $(document).scrollLeft() - 37.5; 
      var y = e.clientY + $(document).scrollTop() - 38; 
      $('#mouse').css('left', x).css('top',y); 
    }); 
}); 

鼠標圖像是在正確的地方，但似乎閃爍，浮華。過渡並不像我想要的那麼順利。不知何故，似乎mouseout和mouseenter事件每次在content-bg div中移動鼠標時都會觸發。

任何想法如何解決這個問題？

感謝

Answer 1

正如已指出了意見，你mouseout當鼠標懸停突然#mouse，因爲它似乎發生。

您需要手動取消這些事件：

$('#content-bg').mouseout(function(e){ 
     if($(e.relatedTarget).is('#mouse')) { return false; } 
     $('#mouse').hide(); 
     $(this).css("cursor","none"); 
     return false; 
}); 

$('#content-bg').mouseenter(function(e){ 
     if($(e.fromElement).is('#mouse')) { return false; } 
     $('#mouse').show(); 
     return false; 
});