On Hover function is not showing in Chrome for my Jvectormap

Question

Can't figure out why only chrome will not function, it is working fine in IE and Firefox.

$(function () {
$('#jvectormap-mill').vectorMap({
    map: 'world_mill_en',
    backgroundColor: 'white',
    regionStyle: {
        initial: {
            fill: '#002d62'
        },
        hover: {
            fill: '#FEC057',
            "fill-opacity": 1
        }
    },
    series: {
        regions: [{
            scale: ['#00B5E6'],
            attribute: 'fill',
            values: SavillePartnerArray()
        }]
    },
    onRegionLabelShow: function (e, label, code) {
        for (var partner in SavillePartners) {
            if (partner == code) {

                $("#jvectormap-label").position = e.position;
                return false;
            }
        }
    },
    onRegionOver: function (e, code) {
        var label = $("#jvectormap-label");
        var region = $(".jvectormap-region[data-code='" + code + "']");

        for (var partner in SavillePartners) {
            if (partner == code) {
                var Title = SavillePartners[code].name;

                // Create HTML 
                var stringHtml = '<div class="jvectormap-label2"><div id="titleTextbox"><span id="titleSpan">' + Title + '</span></div><div class="globeLogoDiv"><img src="/images/international-partner-logos/saville-globe.jpg" alt="globe"/></div><div class="savilleLogoDiv"><img src="/images/international-partner-logos/saville-logo.jpg" alt="savilleconsulting" class="savilleLogoImg"/></div>';
                if (SavillePartners[code].accreditedTrainer == 1) {
                    stringHtml = stringHtml + '<div class="internationalPartnersContainer"><div class="internationalContainer"><strong>INTERNATIONAL</strong></div><div class="partnersContainer">PARTNER</div></div><div class="accreditedTrainerContainer" ><div class="accreditedContainer"><strong>ACCREDITED</strong></div><div class="trainerContainer">TRAINER</div></div>';
                }
                else {
                    stringHtml = stringHtml + '<div class="internationPartnersSingle"><strong>INTERNATIONAL PARTNER</strong></div>';
                }
                stringHtml = stringHtml + '</div>';
                label.html(stringHtml);
                label = region.mousemove(function (t) {
                    var label = $("#jvectormap-label");
                    label.css({
                    left: t.pageX + 15,
                    top: t.pageY + 15
                    });
                });

                // Expand the title text to fit
                var spanWidth = $("#titleSpan").width();
                var newFontSize = (250 / spanWidth * 12);
                $("#titleSpan").css({ "font-size": newFontSize, "line-height": newFontSize / 1.2 + "px" });

                return;
            }
        }
        e.preventDefault();
    },
    onRegionOut: function (e, code) {
        var label = $("#jvectormap-label");
        label.html('');
        label.display = 'none';
    },
    onRegionClick: function (e, code) {
        for (var partner in SavillePartners) {
            if (partner == code) {
                var link = SavillePartners[code].link;
                document.location.href = '/International/' + link;
            }
        }
    },
    focusOn: {
        x: mapXFocus,
        y: mapYFocus,
        scale: mapScale
    }
});

});

Developer tools are not showing anything to point me in the direction of why...

If you want to see for yourself how its working in FF and IE but not Chrome please click here and hover on the lighter blue Countries. Any help will be greatly appreciated as I have been stuck on this for hours.

Answer 1

I'm using Chrome Version 25.0.1364.172 and it is working for me. Which version are you using, is there more data? The color changes, what exactly are you trying to solve?