javascript - svg 的文本和边框就像一个元素

Question

我正在制作 map 区域 + svg 交互式 map 。当我将鼠标悬停在像欧盟这样的大区域时，svg 部分就会出现。但每次我将鼠标悬停在文本或边框上时，它都会消失。有人知道如何解决这个问题吗？

CSS:

   .eu {
    position: absolute;
    top: -80px;
    left: -80px;
    display: none;
    width: 1200px;
    height: 1200px;
    z-index: 300;
    }

    .visible {
    display: block;
    pointer-events: all;
    }

jQuery:

    $('#eumap').mouseover(function () {
    $('.eu').addClass('visible');
    });
    $('.eu').mouseout(function () {
    $('.eu').removeClass('visible');
    });

    $('#apmap').mouseover(function () {
    $('.ap').addClass('visible');
    });
    $('.ap').mouseout(function () {
    $('.ap').removeClass('visible');
    });

svg太多要复制，所以这里有点DEMO

Answer 1

您可以添加到您的 CSS...

text {
   pointer-events: none;
}

参见 https://jsfiddle.net/g04qhcw9/