如何修复网页上的自定义 HTML 光标问题？

Question

我正在开发一款创新的应用程序来保护用户密码。这是一个名为 GATE 的获奖系统 [如果您有兴趣，可以在以下网站上阅读它]，我在输入信息时需要有一个自定义光标。

当我进入登录屏幕时，它会显示 table，其中有多个按钮。每个按钮上有 4 个符号。我可以点击按钮输入我的密码。为了不暴露我点击的是哪个符号，我需要一个自定义光标来屏蔽按钮上的符号。

但是我有以下两个问题：

自定义光标有时不显示，如何让它始终显示，尤其是在按钮上方时。
鼠标定位在自定义光标的左上角，如何将鼠标定位到自定义光标的中心？

我的 HTML 代码如下所示：

<Head>
  <Title>GATE_Servlet</Title>
<style>.Tokens_Table {cursor: url(Cursor_Crosshair.cur),url(Cursor_Select.cur),url(Cursor_Empty.cur),auto;}</style>
</Head>

<Body BgColor=#C6DAFA>

<Center>
<P><Br>
<Div class="Tokens_Table">
<Table Border=0 Cellspacing=10 Cellpadding=10>
  <Tr>
    <Td Align=Center><button id=Token_0_0 type=button style="width:82px;height:82px;font-size: 18px"><Center>  <Table Border=0 Cellspacing=2 Cellpadding=0 Width=60>    <Tr><Td Width=25 Align=Center><f>2</f></Td><Td Width=25 Align=Center><f>Ⓕ</f></Td></Tr>    <Tr><Td Width=25 Align=Center><f>☴</f></Td><Td Width=25 Align=Center><f>₠</f></Td></Tr>  </Table></Center></button></Td>
    <Td Align=Center><button id=Token_0_1 type=button style="width:82px;height:82px;font-size: 18px"><Center>  <Table Border=0 Cellspacing=2 Cellpadding=0 Width=60>    <Tr><Td Width=25 Align=Center><f>25</f></Td><Td Width=25 Align=Center><f>δ</f></Td></Tr>    <Tr><Td Width=25 Align=Center><f>☾</f></Td><Td Width=25 Align=Center><f>$</f></Td></Tr>  </Table></Center></button></Td>
    <Td Align=Center><button id=Token_0_2 type=button style="width:82px;height:82px;font-size: 18px"><Center>  <Table Border=0 Cellspacing=2 Cellpadding=0 Width=60>    <Tr><Td Width=25 Align=Center><f>30</f></Td><Td Width=25 Align=Center><f>α</f></Td></Tr>    <Tr><Td Width=25 Align=Center><f>♥</f></Td><Td Width=25 Align=Center><f>&</f></Td></Tr>  </Table></Center></button></Td>
  </Tr>
  <Tr>
    <Td Align=Center><button id=Token_1_0 type=button style="width:82px;height:82px;font-size: 18px"><Center>  <Table Border=0 Cellspacing=2 Cellpadding=0 Width=60>    <Tr><Td Width=25 Align=Center><f>23</f></Td><Td Width=25 Align=Center><f>π</f></Td></Tr>    <Tr><Td Width=25 Align=Center><f>◒</f></Td><Td Width=25 Align=Center><f>☣</f></Td></Tr>  </Table></Center></button></Td>
    <Td Align=Center><button id=Token_1_1 type=button style="width:82px;height:82px;font-size: 18px"><Center>  <Table Border=0 Cellspacing=2 Cellpadding=0 Width=60>    <Tr><Td Width=25 Align=Center><f>37</f></Td><Td Width=25 Align=Center><f>Ⓢ</f></Td></Tr>    <Tr><Td Width=25 Align=Center><f>☷</f></Td><Td Width=25 Align=Center><f>⊂</f></Td></Tr>  </Table></Center></button></Td>
    <Td Align=Center><button id=Token_1_2 type=button style="width:82px;height:82px;font-size: 18px"><Center>  <Table Border=0 Cellspacing=2 Cellpadding=0 Width=60>    <Tr><Td Width=25 Align=Center><f>50</f></Td><Td Width=25 Align=Center><f>β</f></Td></Tr>    <Tr><Td Width=25 Align=Center><f>△</f></Td><Td Width=25 Align=Center><f>☟</f></Td></Tr>  </Table></Center></button></Td>
  </Tr>
  <Tr>
    <Td Align=Center><button id=Token_2_0 type=button style="width:82px;height:82px;font-size: 18px"><Center>  <Table Border=0 Cellspacing=2 Cellpadding=0 Width=60>    <Tr><Td Width=25 Align=Center><f>15</f></Td><Td Width=25 Align=Center><f>ο</f></Td></Tr>    <Tr><Td Width=25 Align=Center><f>♂</f></Td><Td Width=25 Align=Center><f>✉</f></Td></Tr>  </Table></Center></button></Td>
    <Td Align=Center><button id=Token_2_1 type=button style="width:82px;height:82px;font-size: 18px"><Center>  <Table Border=0 Cellspacing=2 Cellpadding=0 Width=60>    <Tr><Td Width=25 Align=Center><f>24</f></Td><Td Width=25 Align=Center><f>ψ</f></Td></Tr>    <Tr><Td Width=25 Align=Center><f>♣</f></Td><Td Width=25 Align=Center><f>♨</f></Td></Tr>  </Table></Center></button></Td>
    <Td Align=Center><button id=Token_2_2 type=button style="width:82px;height:82px;font-size: 18px"><Center>  <Table Border=0 Cellspacing=2 Cellpadding=0 Width=60>    <Tr><Td Width=25 Align=Center><f>47</f></Td><Td Width=25 Align=Center><f>λ</f></Td></Tr>    <Tr><Td Width=25 Align=Center><f>◑</f></Td><Td Width=25 Align=Center><f>₩</f></Td></Tr>  </Table></Center></button></Td>
  </Tr>
</Table>
</Div>
<P>
...
</Body>
</Html>

演示应用运行位于：

https://gate-web.herokuapp.com/GATE_Servlet?User_Id=admin&Menu=Login

在尝试之前，您需要先了解它的工作原理：

https://gate-web.herokuapp.com/how_gate_works.jsp

Answer 1

试试这个：

button {
    cursor: inherit !important;
}

.Tokens_Table {
    cursor: url(Cursor_Crosshair.cur) 40 40, auto;   /* 40 = half of width/height */
}

似乎 Chrome 有一个 CSS3 游标的错误，所以下面的代码不起作用：

cursor: url(Cursor_Crosshair.cur),url(Cursor_Select.cur),url(Cursor_Empty.cur) 40 40, auto;

Answer 2

由于 IE 不支持 "cursor" 规范中的 [ x y ] 参数，我想出了另一个解决方案如下。

我从 http://www.rw-designer.com/cursor-maker

下载了一个名为 "RealWorld Cursor Editor" 的软件

将我的光标 .png 文件转换为鼠标光标文件，然后将该光标文件中的热点设置为光标的中心，并保存该 .cur 文件。

然后在 html 中使用以下行来使用那个 .cur 文件[中间有一个热点]：

<style>
  .Tokens_Table { cursor: url(Cursor_Crosshair.cur),url(Cursor_Select.cur),url(Cursor_Empty.cur), auto; }
  button { cursor: inherit !important; }
</style>

现在，它可以在所有 3 种主要浏览器中运行：Firefox、IE 和 Chrome。

您可以在以下网址尝试：https://gate-web.herokuapp.com/index.jsp

如何修复网页上的自定义 HTML 光标问题？

How to fix custom HTML cursor issue on a web page?

html

css

custom-cursor