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);
     });
});

鼠标图像位于正确的位置，但似乎是闪烁和浮华。过渡并不像我想的那么顺利。不知何故，似乎每当我在content-bg div中移动鼠标时都会触发mouseout和mouseenter事件。

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

由于

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;
 });

Jquery替换鼠标光标

1 个答案: