javascript - 图像映射中的多链接事件不起作用

Question

我正在尝试使用图像映射在单个图像中创建多个链接。当用户使用此脚本悬停链接时，我想添加一些事件

$("#gt1").hover(
    function () {
        $(this).append($("<div id='mouse' class='gtcon'><span>Hello 1</span></div>"));
    },
    function () {
        $(this).find("div:last").remove();
    }
);

但是不工作。有什么建议吗？这是我的完整脚本。 http://jsfiddle.net/edisutrisno/6t9gL/

Answer 1

现在，您正在尝试添加 <div>在 <area> 里面( this )，这是没有意义的。

但我想你想要这个:

$("#gt1").hover(
    function () {
        $(document.body).append($("<div id='mouse' class='gtcon'><span>Hello 1</span></div>"));
    },
    function () {
        $("div:last").remove();
    }
);

这会有效地产生您可能想要的漂亮气泡。

Demonstration

正如 gvee 所注意到的，您可以减少重复。例如:

var texts = [null,'hello 1', 'hello 2'];
$(".pin").hover(
    function () {
        $(document.body).append($("<div id='mouse' class='gtcon'><span>"+texts[this.id.slice(-1)]+"</span></div>"));
    },
    function () {
        $("#mouse").remove();
    }
);

Demonstration