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 に答える