title: Is it possible to put the mouse cursor behind an element or does the mouse cursor have an z-index?
body: <p>I would like to replace the mouse cursor with an custom image when the mouse hovers over a certain element. I do it by setting the mouse curser off first with</p>
  
  <pre><code>cursor: none;
  </code></pre>
  
  <p>when it hovers the element.</p>
  
  <p>Then I read out the cursor position on the hovered element and set the css position of a graphic to the cursor position with a slight offset, so that the mouse curser is not over the graphic but still over the hover area. </p>
  
  <p>I made a fiddle here:
  <a href="http://jsfiddle.net/TimG/6XeWK/" rel="nofollow">http://jsfiddle.net/TimG/6XeWK/</a></p>
  
  <p>Now it works quiet allright. The problem is just when you move the mouse very fast, the mouse cursor leaves the hover area and "slips" over the image what of course makes it impossible to determine the mouse position relative to the hover area (move very fast to the bottom left on the black hover area). I could make it a little harder to slip out of the hover area by setting the graphic to </p>
  
  <pre><code>display: none;
  </code></pre>
  
  <p>before the images' css position is changed and after it is changed setting it to </p>
  
  <pre><code>display: block;
  </code></pre>
  
  <p>again. Unfortunately it does not prevent this problem fully. </p>
  
  <p>So: Is there any way of preventing this? Or is there a way to put the mouse cursor behind the hand? Kind of like setting a z-index to the mouse-cursor (my guess is, that it would not be possible, as it is no DOM element)?</p>
  
  <p>Thx for any help.</p>