Question

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

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

每个区域如下：

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

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

请参阅此Fiddle以获取示例

有什么建议吗？

[编辑]我忘了提及：我只限谷歌Chrome！（HTML5 FileSystem支持和我正在使用的一些其他选项）

[编辑2]

The Hack：使用Greger提到的不透明度为1的1x1像素似乎无法正常工作 jsFiddle 2

Answer 1

http://jsfiddle.net/BaEks/

添加游标：无;对于区域标签

或：

* {
  cursor: none;
}

[UPDATE]

使用javascript代替map / area-tags

示例：

$("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/

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

1 个答案: