7

我在网页上创建了一个带有触发器的滑块面板。在这个面板上，我放置了 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

4

3 回答 3

17

您可以z-index=11在jquery-jvectormap-1.2.2.css中设置如下：

.jvectormap-label {
    position: absolute;
    display: none;
    border: solid 1px #CDCDCD;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: #292929;
    color: white;
    font-family: sans-serif, Verdana;
    font-size: smaller;
    padding: 3px;
    z-index:11;
 }
于 2013-06-24T03:52:46.363 回答
8

您是否在此过程中丢失了 jquery.vector-map.css 样式表？这将导致标签和缩放按钮消失。

于 2012-05-23T16:35:54.883 回答
0

我在使用滑块和 jvectormap 的组合时遇到了同样的问题。但是，我不得不更改 .jvectormap-tip 的 z-index，而不是更改 .jvectormap-label 的 z-index。

于 2014-11-28T11:45:44.627 回答