javascript jQuery 在带有图像映射的悬停时显示 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19980864/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery show div on hover with image map
提问by Justice Is Cheap
I have an image map that I want to show a new div when I hove over the hotspots. It starts with a default listing of text but once I mouseover the hotspots, I want that to change out to the corresponding div's. I'm using the following code and am getting no joy:
我有一个图像地图，当我将鼠标悬停在热点上时，我想显示一个新的 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");
});
Here's the entire code: http://jsfiddle.net/leadbellydesign/jR6pa/1/
这是整个代码：http: //jsfiddle.net/leadbellydesign/jR6pa/1/
I've done tons of searches and have come up with nothing helpful. I don't want to change images, I just want to show div's.
我已经进行了大量的搜索，但没有找到任何有用的信息。我不想更改图像，我只想显示 div。
回答by kei
You still need to fix the space below the divs, but this should work
您仍然需要修复 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");
});
UPDATE
更新
To fix the spacing issue, update your .office-defaultCSS:
要解决间距问题，请更新您的.office-defaultCSS：
.office-default {
background:#444;
padding:5px 15px 0;
width: 80%;
height:150px;
}
