代码之家 › 专栏 › 技术社区 › Frank

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

custom-cursor css html

Frank · 技术社区 · 7 年前

我正在开发一个创新的应用程序来保护用户密码。这是一个获奖的系统,名为gate(如果你感兴趣的话,你可以在下面的网站上阅读),当我输入我的信息时,我需要一个自定义的光标。

当我进入登录屏幕时,它会显示一个包含多个按钮的表。每个按钮上有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

2 回复 | 直到 7 年前

Jason 7 年前

试试这个:

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;

Frank 7 年前

由于ie不支持“cursor”规范中的[x y]参数,我提出了另一个解决方案如下。

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

将cursor.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>

现在,它可以在所有三种主要浏览器中工作:firefox、ie&chrome。

您可以在以下位置尝试: https://gate-web.herokuapp.com/index.jsp