svg的文本和邊界像一個元素一樣

Question

我在製作地圖區域+ svg交互式地圖。當我懸停在像歐盟那樣的大區域時，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/

Answer 2

當我將鼠標懸停在歐盟這樣的大區域時，svg部分出現。但每次我將鼠標懸停在文字或邊框上時，它都會消失。

那是因爲你使用的鼠標懸停/鼠標移開 - 他們再次每次你把鼠標移動到子元素時間觸發。 （見Jquery mouseenter() vs mouseover()瞭解詳細信息）

只需使用的mouseenter /鼠標離開來代替：

$('#eumap').mouseenter(function() { 
    $('.eu').addClass('visible'); 
}); 
$('.eu').mouseleave(function() { 
    $('.eu').removeClass('visible'); 
}); 

https://jsfiddle.net/g04qhcw9/1/