Ярлык jVectorMap не виден, почему?

Question

Я создал панель слайдера с триггером на веб-странице. На этой панели я разместил 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; Но возможно, что проблема в другом. Если у вас острый ум и разум, вы можете дать мне отличное предложение. Спасибо, К

Answer 1

Вы случайно потеряли в процессе таблицу стилей jquery.vector-map.css? Это приведет к исчезновению меток и кнопок масштабирования.

Answer 2

Вы можете установить 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;
 }

Answer 3

У меня была та же проблема с комбинацией слайдера и jvectormap. Но вместо того, чтобы изменить z-индекс.jvectormap-label, мне пришлось изменить z-индекс.jvectormap-tip.