html - 映射图像上的自定义光标

Question

我想将自定义光标添加到我的 html 图片库中，在那里我在图像的左侧或右侧获得“上一个”或“下一个”自定义光标。

我曾尝试通过 html 和 css 添加自定义光标(也尝试过内置光标)。我有为此工作的代码，但在硬盘崩溃中丢失了。我认为以前的努力是在 css 上。我花了大约 8 个小时的研究试图重建它，现在求助于反复试验和错误......

img.pad {
  float: right;
  padding: 2px;
}

.lmap {
  cursor: cell, url(larrow.png)
}

.rmap {
  cursor: progress, url(rarrow.png), auto
}

<img usemap="#imap" class="pad" src="img_0001.jpg" width="850" height="638" title="img_0001.jpg">
<p>
  <map name="imap"><area shape="rect" class="lmap" coords="0,0,340,637" cursor= copy href="P001.html" >
    <area shape="rect" class="rmap" coords="510,0,849,637" href="P003.html"></map>

当鼠标悬停在图像的链接部分上时，我没有收到任何错误消息，除了(默认)手指之外什么也没有。

链接有效(即使使用错误的游标代码)，但我想让游标部分再次运行。

我知道代码被屠杀了，但我已经尝试了很多版本，啊!根据 css 部分，我真的想要 png 图像。

Answer 1

尝试:

.lmap {
  cursor: url(larrow.png), cell;
}

.rmap {
  cursor: url(rarrow.png), progress;
}

url 声明应该放在第一位，而其他值用作后备以防 url 不起作用。将 url 作为 native 值的回退没有任何意义，因为浏览器永远不会选择回退到 url 值。

有关游标 CSS 的更多信息 here .