Question

我有一张图像地图，当我穿过热点时，我想展示一个新的div。它以默认的文本列表开头，但是一旦我将鼠标悬停在热点上，我希望将其更改为相应的div。我正在使用以下代码而且没有任何乐趣：

$(".office-default").mouseover(function () {
    var elementId = "#office-" + $(this).attr("id").split("-")[1];
    $(elementId).removeClass("hidden");
});

$(".office-default").mouseout(function () {
    var elementId = "#office-" + $(this).attr("id").split("-")[1];
    $(elementId).addClass("hidden");
});

以下是整个代码： http://jsfiddle.net/leadbellydesign/jR6pa/1/

我已经完成了大量的搜索，并且没有提供任何帮助。我不想改变图像，我只想展示div。

Answer 1

您仍然需要修复div下面的空格，但这应该可以正常工作

DEMO

$("area").hover(function () {
    $office = $(this).attr("href");
    $(".office-default > div").addClass("hidden");
    $($office).removeClass("hidden");
}, function(){
    $(".office-default > div").addClass("hidden");
    $("#office-1").removeClass("hidden");
});

<强>更新

要解决间距问题，请更新.office-default CSS：

DEMO

.office-default {
    background:#444;
    padding:5px 15px 0;
    width: 80%;
    height:150px;
}

Answer 2

访问此链接，它可能会帮助您http://www.outsharked.com/imagemapster/default.aspx?demos.html#beatles

jQuery显示div悬停与图像映射

2 个答案: