鼠标翻转/卷展栏上的跳跃（越野车）字形地图图标

Question

在我的initial task with the help of RoelN, I was able to convert the provinces of South Africa into SVG maps and piece the map together quite nicely

中

我现在需要为我已经开始做的地图制作动画，但因为地图都是绝对定位的并且彼此重叠，所以当您尝试选择正确的地图时，它会出错。

简单动画：

• 省份，省份扩大50％
• 当前省份的展示，地图缩放回原始大小。

执行此操作的最佳方法是在当前地图处于激活模式时停用所有其他地图？

这是最新的小提琴（aaaaaargh不允许发布小提琴链接！这么多重复，我在jsFiddle上有一个工作版!!!!）编辑：请参阅下面评论中的jsFiddle链接

这是代码。

<div class="maps">
    <div class="mini-map-wrapper">
        <div class="mini-map">
            <span class="prov-North-West"></span>
            <span class="prov-Limpopo"></span>
            <span class="prov-Mpumalanga"></span>
            <span class="prov-KwaZulu-Natal"></span>
            <span class="prov-Gauteng"></span>
            <span class="prov-Free-State"></span>
            <span class="prov-Eastern-Cape"></span>
            <span class="prov-Western-Cape"></span>
            <span class="prov-Northern-Cape"></span>
        </div>                                              
    </div>
</div>

<div class="map-0"></div>
<div class="map-1"></div>
<div class="map-2"></div>
<div class="map-3"></div>
<div class="map-4"></div>
<div class="map-5"></div>
<div class="map-6"></div>
<div class="map-7"></div>
<div class="map-8"></div>


@font-face {
    font-family: 'za-provinces';
    src:url('http://vane.co.za/files/south-african-province-glyphs/fonts/za-provinces.eot');
    src:url('http://vane.co.za/files/south-african-province-glyphs/fonts/za-provinces.eot?#iefix') format('embedded-opentype'),
        url('http://vane.co.za/files/south-african-province-glyphs/fonts/za-provinces.woff') format('woff'),
        url('http://vane.co.za/files/south-african-province-glyphs/fonts/za-provinces.ttf') format('truetype'),
        url('http://vane.co.za/files/south-african-province-glyphs/fonts/za-provinces.svg#za-provinces') format('svg');
    font-weight: normal;
    font-style: normal;
}

.maps {
        position: relative;
        .mini-map-wrapper {
            position: absolute;
            top: 10px;
            left: 50px;
            width:  330px;
            height: 330px;
            padding:10px;
            background-color: rgba(255,255,255,0.5);;
        }
        .mini-map {
            width: 100%;
            height: 100%;
            margin: 0 auto;
            background-color: white;
            position: relative;
        }
    }

    [class^="prov-"], [class*=" prov-"] {
        font-family: 'za-provinces';
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;

        /* Better Font Rendering =========== */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;


        font-size:8em;
        color: $corp-blue;

    }

    .prov-Western-Cape:before, 
    .prov-Northern-Cape:before, 
    .prov-Free-State:before, 
    .prov-Eastern-Cape:before, 
    .prov-North-West:before, 
    .prov-Mpumalanga:before, 
    .prov-Limpopo:before, 
    .prov-KwaZulu-Natal:before, 
    .prov-Gauteng:before
    {
        position: absolute;
    }


    .prov-Western-Cape:before {
        content: "\e600";
        bottom: 0;
        left: 30px;
        color: green;
    }
    .prov-Northern-Cape:before {
        content: "\e601";
        bottom: 84px;
        left: 14px;
        color: orange;
    }
    .prov-Free-State:before {
        content: "\e602";
        bottom: 51px;
        left: 114px;
        color: yellow;
    }
    .prov-Eastern-Cape:before {
        content: "\e603";
        bottom: 8px;
        left: 98px;
        color: pink;
    }
    .prov-North-West:before {
        content: "\e604";
        top: 116px;
        left: 93px;
        color: #0f0;
    }
    .prov-Mpumalanga:before {
        content: "\e605";
        bottom: 94px;
        left: 169px;
        color: brown;
    }
    .prov-Limpopo:before {
        content: "\e606";
        top: 80px;
        right: 62px;
        color: #87ceeb;
    }
    .prov-KwaZulu-Natal:before {
        content: "\e607";
        bottom: 52px;
        right: 32px;
        color: teal;
    }
    .prov-Gauteng:before {
        content: "\e608";
        top: 126px;
        left: 154px;
        color: red;
    }


var provArr =  [["prov-Eastern-Cape"    , "map-0"],
               ["prov-Free-State"       , "map-1"],
               ["prov-Gauteng"          , "map-2"],
               ["prov-KwaZulu-Natal"    , "map-3"],
               ["prov-Limpopo"          , "map-4"],
               ["prov-Mpumalanga"       , "map-5"],
               ["prov-North-West"       , "map-6"],
               ["prov-Northern-Cape"    , "map-7"],
               ["prov-Western-Cape" , "map-8"]
              ];

    // first map is eastern cape is current
    var currProv = provArr[0][2]; 

    // deactivate all maps first
    function deActivateMaps () {

        jQuery.each( provArr, function( i, val ) {
            jQuery( "." + provArr[i][0] ).hover(function(e) {
                e.preventDefault();
                //do other stuff when a click happens
            });

        });
    }

    jQuery (".map-0").slideDown();

    //affect only the current map
    jQuery.each( provArr, function( i, val ) {

        jQuery( "." + provArr[i][0] ).hover(function() {

            jQuery(this).css("cursor","pointer");
            //jQuery(this).animate({"border":"1px solid red"}, 500);
            jQuery(this).animate({"color":"#efbe5c","font-size":"12em","left":"600px;"}, 500);

                // on click load maps

                jQuery( "." + provArr[i][0] ).click(function() {

                    jQuery("." + currProv).hide();
                    jQuery("." + provArr[i][3]).show();

                    currProv = provArr[i][4];

                });

            }, function() {

                jQuery(this).animate({"font-size":"8em","z-index":"1"}, 500);
                //deActivateMaps ();


        });

    });