title: Changing cursor to custom image with jQuery
body: <p>I'm trying to write jQuery plugin which replace default cursor to necessary image, but I have a problem with <strong>mouseleave</strong>. It doesn't fire because cursor always before child div and never leave it, so cursor never changes back to default.</p>
  
  <h1><a href="http://jsbin.com/lafesa/edit?js,output" rel="nofollow"><strong>DEMO</strong></a></h1>
  
  <p>Any ideas how to fix it?</p>
  
  <p>By the way: jQuery <strong>mouseleave</strong> behavior is little strange. It fires only when you leave your div and all childe divs.</p>
  
  <h1><a href="http://jsbin.com/mosose/1/edit?html,css,js,output" rel="nofollow"><strong>DEMO 2</strong></a></h1>
  
  <p>My code:</p>
  
  <pre><code>// Plugin changing cursor before element
  ;
  (function ($) {
      $.fn.changeCursor = function (cursorPicUrl, dx, dy) {
          function inFunction(e) {
              $cursor.show();
              return false;
          }
          function outFunction(e) {
              $cursor.hide();
              return false;
          }
          function moveFunction(e) {
              var x = e.clientX-100;
              var y = e.clientY-100;
              $cursor.css({
                  "transform": "translate(" + x + "px," + y + "px)"
              });
          }
          var $cursor = $('&lt;div id="#custom-cursor"&gt;&lt;/div&gt;').css({
              /*cursor: none;*/
              width:      '150px',
              height:     '150px',
              background: 'url("' + cursorPicUrl + '") no-repeat left top',
              position:   'absolute',
              display:    'none',
              'z-index':  '10000'
          });
  
          this.append( $cursor )
              .on( "mouseenter", inFunction )
              .on( "mouseleave", outFunction )
              //.hover( inFunction, outFunction)
              .mousemove( moveFunction );
          return this;
      };
  
  })(jQuery);
  
  $(document).ready(function () {
      var url = 'http://placehold.it/150x150';
      $('#test-area').changeCursor( url );
  
  });
  </code></pre>
  
  <h1>UPDATE</h1>
  
  <p>My solition here:</p>
  
  <h1><strong><a href="https://github.com/Webbrother/jquery.change-cursor" rel="nofollow">jquery.change-cursor</a></strong></h1>