jQuery在圖像地圖上懸停顯示div

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

您仍然需要修復divs下面的空間，但這應該可以工作

演示

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

演示

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

Answer 2

訪問此鏈接，可能會對您有所幫助http://www.outsharked.com/imagemapster/default.aspx?demos.html#beatles