7

Web ページにトリガーを使用してスライダー パネルを作成しました。このパネルに 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 に答える