0

我有一个图像地图,当我将鼠标悬停在热点上时,我想显示一个新的 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。

4

1 回答 1

2

您仍然需要修复 div 下方的空间,但这应该可以

演示

$("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-defaultCSS:

演示

.office-default {
    background:#444;
    padding:5px 15px 0;
    width: 80%;
    height:150px;
}
于 2013-11-14T15:15:02.777 回答