如何隐藏图像地图区域上的光标

Question

jsFiddle

我正在为触摸屏制作 Web 应用程序。这意味着我不需要在屏幕上使用鼠标！

我正在使用cursor:none; 来隐藏整个页面中的光标，但不知何故这在图像映射区域上不起作用。

每个区域的制作如下：

<area shape="rect" onclick="buttonPressed_DigitalKeyboard('Q');" coords="14,13,94,93" alt="" href="#">

当我删除 href="#" 时，光标确实会变为普通指针，但 href 是验证所必需的。

请参阅此Fiddle 以获取示例

有什么建议吗？

---

[编辑] 我忘了说：我只能使用谷歌浏览器！ （HTML5 文件系统支持和我正在使用的一些其他选项）

---

[编辑 2]

The Hack：使用 Greger 提到的不透明度为 1 的 1x1 像素似乎也不起作用
jsFiddle 2

Answer 1

http://jsfiddle.net/BaEks/

添加光标：无；对于区域标签

或：

* {
  cursor: none;
}

[更新]

使用 javascript 代替地图/区域标签

例子：

$("img#appkeyboard").click(function(e) {
    var off = $(this).offset();
    var cx = e.clientX - off.left;
    var cy = e.clientY - off.top;
    if (cy > 17 && cy < 99) { // 1 row
        if (cx > 17 && cx < 99) {
            alert("button Q is pressed!");
        } else if (cx > 56 && cx < 202) {
            alert("button W is pressed!");
        }
        // ....
    } else if (cy > 114 && cy < 195) { // 2 row
        if (cx > 52 && cx < 135) {
            alert("button A is pressed!");
        } else if (cx > 155 && cx < 237) {
            alert("button S is pressed!");
        }
        // ....
    } else if (cy > 211 && cy < 291) { // 3 row
        if (cx > 90 && cx < 170) {
            alert("button Z is pressed!");
        }
        // ....
    }
});

见：http://jsfiddle.net/RadVp/1/