svg 的文本和边框就像一个元素答案

【问题标题】：Text and border of svg acting like one elementsvg 的文本和边框就像一个元素
【发布时间】：2016-07-19 07:04:58
【问题描述】：

我正在制作地图区域 + 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

【问题讨论】：

标签： javascript html css svg text

【解决方案1】：

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

text {
   pointer-events: none;
}

见https://jsfiddle.net/g04qhcw9/

【讨论】：

【解决方案2】：

当我将鼠标悬停在像欧盟这样的大区域上时，会出现 svg 部分。但是每次我将鼠标悬停在文本或边框上时，它都会消失。

那是因为您正在使用 mouseover/mouseout - 每次您将鼠标移到 子元素 上时它们都会再次触发。（详情请参阅Jquery mouseenter() vs mouseover()。）

只需使用 mouseenter/mouseleave 代替：

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

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

【讨论】：