title: How to make a cursor contrast with the background?
body: <p>For the browsers I've tried (Chrome, Firefox, and IE), the built in crosshair cursor changes to white when it is over a black image and black when it is over a white image.  Is there a way to make custom cursors that do this?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
    height: 100px;
    width: 100px;
    border: 1px solid black;
  }
  
  .black {
    background-color: black;
  }
  
  .white {
    background-color: white;
  }
  
  .crosshair {
    cursor: crosshair;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="black crosshair"&gt;&lt;/div&gt;
  &lt;div class="white crosshair"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="http://jsfiddle.net/briguy37/jwunm/" rel="nofollow noreferrer">Original fiddle</a>.</p>
  <p>Thanks much!</p>