1つの要素のように動作するsvgのテキストと境界

Question

私はマップ領域+ svgインタラクティブマップを作っています。 EUのような大きな地域に乗ると、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があるので、ここでは、あなたのCSSに追加することができます少しDEMO

Answer 1

です...

text { 
    pointer-events: none; 
} 

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

Answer 2

EUのような大きな領域にカーソルを合わせると表示されます。しかし、文章や国境の上にカーソルを置くたびに、それは消えます。彼らは再びあなたが子要素の上にマウスを移動するたびに火災 - あなたはマウスオーバー/マウスアウトを使用しているためだ

。 （詳細についてはJquery mouseenter() vs mouseover()を参照してください）

だけのMouseEnterを使用/代わりにmouseleave：

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

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