jQuery replacing mouse cursor


I’m trying to replace the mouse cursor with an image.

I have the following html:

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


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

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


          return false;
          return false;
          var x = e.clientX - $(document).scrollLeft() - 37.5;
          var y = e.clientY + $(document).scrollTop() - 38;
          $('#mouse').css('left', x).css('top',y);

The mouse image is on the right place but seems to be blinking and flashy. The transitions aren’t as smooth as I wanted. Somehow it seems that the mouseout and mouseenter events are triggered every time I move the mouse inside the content-bg div.

Any idea how I can solve this?


As has been pointed out in comments, your mouseout occurs when your mouse suddenly hovers #mouse, as it appears.

You need to cancel out these events manually:

      if($(e.relatedTarget).is('#mouse')) { return false; }
      return false;

      if($(e.fromElement).is('#mouse')) { return false; }
      return false;

Answered By – David Hedlund

Answer Checked By – Jay B. (AngularFixing Admin)

Leave a Reply

Your email address will not be published.