0

我正在尝试用图像替换鼠标光标。

我有以下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);
     });
});

鼠标图像在正确的位置，但似乎在闪烁和浮华。过渡并不像我想要的那样平滑。不知何故，每次我在 content-bg div 内移动鼠标时，似乎都会触发 mouseout 和 mouseenter 事件。

知道如何解决这个问题吗？

谢谢

4

1 回答 1

2

正如评论中所指出的，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;
 });
于 2012-05-08T11:20:42.677 回答