title: How to fix custom HTML cursor issue on a web page?
body: <p>I'm developing an innovative app to protect user passwords. It's an award winning system called GATE [ you can read about it on the following site if you are interested ], and I need to have a custom cursor when I enter my info.</p>
  
  <p>When I get to a login screen, it will show me a table with multiple buttons in it. Each button has 4 symbols on it. I can click the buttons to enter my pin. In order not to expose which symbol I'm clicking on, I need a custom cursor to mask the symbols on the button. </p>
  
  <p>But I have the following 2 problems:</p>
  
  <ol>
  <li><p>The custom cursor sometimes don't show up, how to make it always show up especially when it's over a button.</p></li>
  <li><p>The mouse is positioned at the upper left corner of the custom cursor, how to position the mouse to the center of the custom cursor ?</p></li>
  </ol>
  
  <p>My HTML code looks like this:</p>
  
  <pre><code>&lt;Head&gt;
    &lt;Title&gt;GATE_Servlet&lt;/Title&gt;
  &lt;style&gt;.Tokens_Table {cursor: url(Cursor_Crosshair.cur),url(Cursor_Select.cur),url(Cursor_Empty.cur),auto;}&lt;/style&gt;
  &lt;/Head&gt;
  
  &lt;Body BgColor=#C6DAFA&gt;
  
  &lt;Center&gt;
  &lt;P&gt;&lt;Br&gt;
  &lt;Div class="Tokens_Table"&gt;
  &lt;Table Border=0 Cellspacing=10 Cellpadding=10&gt;
    &lt;Tr&gt;
      &lt;Td Align=Center&gt;&lt;button id=Token_0_0 type=button style="width:82px;height:82px;font-size: 18px"&gt;&lt;Center&gt;  &lt;Table Border=0 Cellspacing=2 Cellpadding=0 Width=60&gt;    &lt;Tr&gt;&lt;Td Width=25 Align=Center&gt;&lt;f&gt;2&lt;/f&gt;&lt;/Td&gt;&lt;Td Width=25 Align=Center&gt;&lt;f&gt;Ⓕ&lt;/f&gt;&lt;/Td&gt;&lt;/Tr&gt;    &lt;Tr&gt;&lt;Td Width=25 Align=Center&gt;&lt;f&gt;☴&lt;/f&gt;&lt;/Td&gt;&lt;Td Width=25 Align=Center&gt;&lt;f&gt;₠&lt;/f&gt;&lt;/Td&gt;&lt;/Tr&gt;  &lt;/Table&gt;&lt;/Center&gt;&lt;/button&gt;&lt;/Td&gt;
      &lt;Td Align=Center&gt;&lt;button id=Token_0_1 type=button style="width:82px;height:82px;font-size: 18px"&gt;&lt;Center&gt;  &lt;Table Border=0 Cellspacing=2 Cellpadding=0 Width=60&gt;    &lt;Tr&gt;&lt;Td Width=25 Align=Center&gt;&lt;f&gt;25&lt;/f&gt;&lt;/Td&gt;&lt;Td Width=25 Align=Center&gt;&lt;f&gt;δ&lt;/f&gt;&lt;/Td&gt;&lt;/Tr&gt;    &lt;Tr&gt;&lt;Td Width=25 Align=Center&gt;&lt;f&gt;☾&lt;/f&gt;&lt;/Td&gt;&lt;Td Width=25 Align=Center&gt;&lt;f&gt;$&lt;/f&gt;&lt;/Td&gt;&lt;/Tr&gt;  &lt;/Table&gt;&lt;/Center&gt;&lt;/button&gt;&lt;/Td&gt;
      &lt;Td Align=Center&gt;&lt;button id=Token_0_2 type=button style="width:82px;height:82px;font-size: 18px"&gt;&lt;Center&gt;  &lt;Table Border=0 Cellspacing=2 Cellpadding=0 Width=60&gt;    &lt;Tr&gt;&lt;Td Width=25 Align=Center&gt;&lt;f&gt;30&lt;/f&gt;&lt;/Td&gt;&lt;Td Width=25 Align=Center&gt;&lt;f&gt;α&lt;/f&gt;&lt;/Td&gt;&lt;/Tr&gt;    &lt;Tr&gt;&lt;Td Width=25 Align=Center&gt;&lt;f&gt;♥&lt;/f&gt;&lt;/Td&gt;&lt;Td Width=25 Align=Center&gt;&lt;f&gt;&amp;&lt;/f&gt;&lt;/Td&gt;&lt;/Tr&gt;  &lt;/Table&gt;&lt;/Center&gt;&lt;/button&gt;&lt;/Td&gt;
    &lt;/Tr&gt;
    &lt;Tr&gt;
      &lt;Td Align=Center&gt;&lt;button id=Token_1_0 type=button style="width:82px;height:82px;font-size: 18px"&gt;&lt;Center&gt;  &lt;Table Border=0 Cellspacing=2 Cellpadding=0 Width=60&gt;    &lt;Tr&gt;&lt;Td Width=25 Align=Center&gt;&lt;f&gt;23&lt;/f&gt;&lt;/Td&gt;&lt;Td Width=25 Align=Center&gt;&lt;f&gt;π&lt;/f&gt;&lt;/Td&gt;&lt;/Tr&gt;    &lt;Tr&gt;&lt;Td Width=25 Align=Center&gt;&lt;f&gt;◒&lt;/f&gt;&lt;/Td&gt;&lt;Td Width=25 Align=Center&gt;&lt;f&gt;☣&lt;/f&gt;&lt;/Td&gt;&lt;/Tr&gt;  &lt;/Table&gt;&lt;/Center&gt;&lt;/button&gt;&lt;/Td&gt;
      &lt;Td Align=Center&gt;&lt;button id=Token_1_1 type=button style="width:82px;height:82px;font-size: 18px"&gt;&lt;Center&gt;  &lt;Table Border=0 Cellspacing=2 Cellpadding=0 Width=60&gt;    &lt;Tr&gt;&lt;Td Width=25 Align=Center&gt;&lt;f&gt;37&lt;/f&gt;&lt;/Td&gt;&lt;Td Width=25 Align=Center&gt;&lt;f&gt;Ⓢ&lt;/f&gt;&lt;/Td&gt;&lt;/Tr&gt;    &lt;Tr&gt;&lt;Td Width=25 Align=Center&gt;&lt;f&gt;☷&lt;/f&gt;&lt;/Td&gt;&lt;Td Width=25 Align=Center&gt;&lt;f&gt;⊂&lt;/f&gt;&lt;/Td&gt;&lt;/Tr&gt;  &lt;/Table&gt;&lt;/Center&gt;&lt;/button&gt;&lt;/Td&gt;
      &lt;Td Align=Center&gt;&lt;button id=Token_1_2 type=button style="width:82px;height:82px;font-size: 18px"&gt;&lt;Center&gt;  &lt;Table Border=0 Cellspacing=2 Cellpadding=0 Width=60&gt;    &lt;Tr&gt;&lt;Td Width=25 Align=Center&gt;&lt;f&gt;50&lt;/f&gt;&lt;/Td&gt;&lt;Td Width=25 Align=Center&gt;&lt;f&gt;β&lt;/f&gt;&lt;/Td&gt;&lt;/Tr&gt;    &lt;Tr&gt;&lt;Td Width=25 Align=Center&gt;&lt;f&gt;△&lt;/f&gt;&lt;/Td&gt;&lt;Td Width=25 Align=Center&gt;&lt;f&gt;☟&lt;/f&gt;&lt;/Td&gt;&lt;/Tr&gt;  &lt;/Table&gt;&lt;/Center&gt;&lt;/button&gt;&lt;/Td&gt;
    &lt;/Tr&gt;
    &lt;Tr&gt;
      &lt;Td Align=Center&gt;&lt;button id=Token_2_0 type=button style="width:82px;height:82px;font-size: 18px"&gt;&lt;Center&gt;  &lt;Table Border=0 Cellspacing=2 Cellpadding=0 Width=60&gt;    &lt;Tr&gt;&lt;Td Width=25 Align=Center&gt;&lt;f&gt;15&lt;/f&gt;&lt;/Td&gt;&lt;Td Width=25 Align=Center&gt;&lt;f&gt;ο&lt;/f&gt;&lt;/Td&gt;&lt;/Tr&gt;    &lt;Tr&gt;&lt;Td Width=25 Align=Center&gt;&lt;f&gt;♂&lt;/f&gt;&lt;/Td&gt;&lt;Td Width=25 Align=Center&gt;&lt;f&gt;✉&lt;/f&gt;&lt;/Td&gt;&lt;/Tr&gt;  &lt;/Table&gt;&lt;/Center&gt;&lt;/button&gt;&lt;/Td&gt;
      &lt;Td Align=Center&gt;&lt;button id=Token_2_1 type=button style="width:82px;height:82px;font-size: 18px"&gt;&lt;Center&gt;  &lt;Table Border=0 Cellspacing=2 Cellpadding=0 Width=60&gt;    &lt;Tr&gt;&lt;Td Width=25 Align=Center&gt;&lt;f&gt;24&lt;/f&gt;&lt;/Td&gt;&lt;Td Width=25 Align=Center&gt;&lt;f&gt;ψ&lt;/f&gt;&lt;/Td&gt;&lt;/Tr&gt;    &lt;Tr&gt;&lt;Td Width=25 Align=Center&gt;&lt;f&gt;♣&lt;/f&gt;&lt;/Td&gt;&lt;Td Width=25 Align=Center&gt;&lt;f&gt;♨&lt;/f&gt;&lt;/Td&gt;&lt;/Tr&gt;  &lt;/Table&gt;&lt;/Center&gt;&lt;/button&gt;&lt;/Td&gt;
      &lt;Td Align=Center&gt;&lt;button id=Token_2_2 type=button style="width:82px;height:82px;font-size: 18px"&gt;&lt;Center&gt;  &lt;Table Border=0 Cellspacing=2 Cellpadding=0 Width=60&gt;    &lt;Tr&gt;&lt;Td Width=25 Align=Center&gt;&lt;f&gt;47&lt;/f&gt;&lt;/Td&gt;&lt;Td Width=25 Align=Center&gt;&lt;f&gt;λ&lt;/f&gt;&lt;/Td&gt;&lt;/Tr&gt;    &lt;Tr&gt;&lt;Td Width=25 Align=Center&gt;&lt;f&gt;◑&lt;/f&gt;&lt;/Td&gt;&lt;Td Width=25 Align=Center&gt;&lt;f&gt;₩&lt;/f&gt;&lt;/Td&gt;&lt;/Tr&gt;  &lt;/Table&gt;&lt;/Center&gt;&lt;/button&gt;&lt;/Td&gt;
    &lt;/Tr&gt;
  &lt;/Table&gt;
  &lt;/Div&gt;
  &lt;P&gt;
  ...
  &lt;/Body&gt;
  &lt;/Html&gt;
  </code></pre>
  
  <p>The demo app is running at:</p>
  
  <ul>
  <li><a href="https://gate-web.herokuapp.com/GATE_Servlet?User_Id=admin&amp;Menu=Login" rel="nofollow noreferrer">https://gate-web.herokuapp.com/GATE_Servlet?User_Id=admin&amp;Menu=Login</a></li>
  </ul>
  
  <p>Before trying it, you need to know how it works first:</p>
  
  <ul>
  <li><a href="https://gate-web.herokuapp.com/how_gate_works.jsp" rel="nofollow noreferrer">https://gate-web.herokuapp.com/how_gate_works.jsp</a></li>
  </ul>