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 / mouseleave代替：

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

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

svg的文字和边框表现得像一个元素

2 个答案: