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();
    }
);

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

示范

正如 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();
    }
);

示范