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

Multi link event in image map doesn't work

本文关键字：链接 事件 不起作用 映射 图像      更新时间：2023-09-26

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

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

现在，您正在尝试在<area>中添加<div>（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();
    }
);

示范

相关文章：