我在网页上创建了一个带有触发器的滑动面板。在这个面板上,我放置了jVectorMap。它可以正常工作(当我打开滑动面板时,地图是可见的),只是国家标签不可见。有人知道为什么吗?
代码部分:
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
colors = {};
colors['it'] = '#76ced9';
$('#map').vectorMap({
map: 'europe_en',
//map: 'jquery-jvectormap-europe-en',
onLabelShow: function(event, label, code){
if (code == 'it') {
event.preventDefault();
} else if (code == 'it') {
label.text('bla bla bal');
}
},
colors: colors,
hoverOpacity: 0.7, // opacity for :hover
hoverColor: false
});
这是面板创建的代码(我删除了一些部分以便于您查看代码):
<div class="panel" style="z-index:10;">
<h3>Our Destinations</h3>
<div id="map" style="width: 600px; height: 550px;"></div>
<a class="trigger" href="#">Map</a>
我在思考,由于板块覆盖了HTML,可能标签不可见是因为它在后面,但我无法找出应该在哪里加上 z-index:10;。 但问题也可能是其他原因导致的。 如果你有敏锐的眼光和头脑,也许可以给我一个好的建议。 谢谢, K
.jvectormap-tip
。 - cr0ss