jQuery在悬停时显示div与图像地图

我有一张图片地图，当我在热点上滚动时，我想显示新的div。它从默认的文本列表开始，但是一旦我将鼠标悬停在热点上，我想要将其更改为相应的div。我使用下面的代码和我越来越没有喜悦：jQuery在悬停时显示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。

来源

2013-11-14 Justice Is Cheap

没有为格“.office默认”没有ID属性。 – Navigatron

好的，当我将鼠标移出时，添加ID“office-default”时，初始图像和文字消失。所以，至少我正在采取某种行动。谢谢！ –

你的代码是说当你将鼠标悬停在整个图像映射上时，创建一个var并从中删除隐藏的类。您需要将此代码应用于每个部分。就像这样：$（“。office-default div”）。mouseover（function（）{ var elementId = $（this）.attr（“id”）; $（elementId）.removeClass（“hidden”） ; }）;' – Navigatron

你仍然需要修复的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"); 
});

UPDATE

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

DEMO

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

来源

2013-11-14 15:15:02 kei

你摇滚！非常感谢。 –

最后一个问题。将信息保留供复制和粘贴，直到您将鼠标悬停在地图上的其他区域上，将会有多困难？如果每次我将鼠标移出时都消失，我很难排除额外的空间。 –

查看更新的解决方案：D – kei

介绍浏览该链接，它可以帮助你有点http://www.outsharked.com/imagemapster/default.aspx?demos.html#beatles

来源

2014-03-21 14:10:04 user252566

jQuery在悬停时显示div与图像地图

回答

相关问题