0

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

当我进入登录屏幕时，它会显示一个包含多个按钮的表格。每个按钮上有 4 个符号。我可以单击按钮输入我的密码。为了不暴露我点击的符号，我需要一个自定义光标来掩盖按钮上的符号。

但我有以下两个问题：

  1. 自定义光标有时不显示，如何使其始终显示，尤其是在按钮上方时。

  2. 鼠标位于自定义光标的左上角，如何将鼠标定位到自定义光标的中心？

我的 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>Ⓕ&lt;/f></Td></Tr>    <Tr><Td Width=25 Align=Center><f>☴&lt;/f></Td><Td Width=25 Align=Center><f>₠&lt;/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>☾&lt;/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>♥&lt;/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>◒&lt;/f></Td><Td Width=25 Align=Center><f>☣&lt;/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>Ⓢ&lt;/f></Td></Tr>    <Tr><Td Width=25 Align=Center><f>☷&lt;/f></Td><Td Width=25 Align=Center><f>⊂&lt;/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>△&lt;/f></Td><Td Width=25 Align=Center><f>☟&lt;/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>♂&lt;/f></Td><Td Width=25 Align=Center><f>✉&lt;/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>♣&lt;/f></Td><Td Width=25 Align=Center><f>♨&lt;/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>◑&lt;/f></Td><Td Width=25 Align=Center><f>₩&lt;/f></Td></Tr>  </Table></Center></button></Td>
  </Tr>
</Table>
</Div>
<P>
...
</Body>
</Html>

演示应用程序在以下位置运行：

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

4

2 回答 2

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;

于 2018-07-13T05:17:56.983 回答
1

由于 IE 不支持“光标”规范中的 [ xy ] 参数，我想出了另一种解决方案，如下所示。

我从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

于 2018-07-13T17:54:09.330 回答