jQuery 鼠标悬停在 SVG 路径上 - 奇怪的错误

Question

晚上好，

我正在为我的管弦乐队编写网站代码，并且正在实施带图片的组织结构图。我的想法是在管弦乐队中拥有一个 "map" 的所有座位，当您将鼠标悬停在其中一个座位上时，会弹出有关此人的信息。多亏了一点 jQuery 和 SVG 调整，我才让它工作：

<g id="luc" class="Seats">
      <path class="cls-9" d="M441.6,153.2l-6.23,13.41L429.15,180a3.4,3.4,0,0,0,.56,3.71l3.11,3.46,3.11,3.46a3.4,3.4,0,0,0,3.63.94l14-4.82,14-4.82a3.4,3.4,0,0,0,1.42-5.49l-10.85-12-10.85-12a3.4,3.4,0,0,0-5.61.84Z" transform="translate(-10.26 -9.14)" />
</g>
<g id="hugo" class="Seats">
      <path class="cls-9" d="M478.17,197.79,468.49,209l-9.68,11.18a3.4,3.4,0,0,0-.49,3.72l2,4.18,2,4.18a3.4,3.4,0,0,0,3.24,1.9l14.75-.78,14.75-.78a3.4,3.4,0,0,0,2.87-4.88L490.9,213.1l-7.11-14.57a3.4,3.4,0,0,0-5.62-.74Z" transform="translate(-10.26 -9.14)" />
</g>
<g id="maxime_d" class="Seats">
      <path class="cls-9" d="M501,250.74l-12.39,8.07-12.39,8.07a3.4,3.4,0,0,0-1.49,3.44l.81,4.58.81,4.58a3.4,3.4,0,0,0,2.58,2.72l14.4,3.31,14.4,3.31a3.4,3.4,0,0,0,4.11-3.9l-2.82-16-2.82-16a3.4,3.4,0,0,0-5.2-2.26Z" transform="translate(-10.26 -9.14)" />
</g>
<g id="marie" class="Seats">
      <path class="cls-8" d="M320.57,318.25l-5.8-13.6L309,291a3.4,3.4,0,0,0-3.13-2.07h-9.3a3.4,3.4,0,0,0-3.13,2.07l-5.76,13.6-5.76,13.6A3.4,3.4,0,0,0,285,323h32.43a3.4,3.4,0,0,0,3.13-4.73Z" transform="translate(-10.26 -9.14)" />
</g>

这些path分别对应下图的4,3,2,1个座位：

我的问题是鼠标悬停在 1 号和 2 号座位上效果很好（图片恰好在我触摸座位时弹出），但不要覆盖 3 号和 4 号的整个座位。

我不知道是什么原因导致了这个问题，它发生在 Chrome、Firefox 和 Edge...

我的jQuery代码：

$(".Seats").hover(over, out); 

function animateOver(element) {
    console.log(element);
    var tl = new TimelineLite();
    var select = $(element);
    var name = select.attr('name');

    $("#name_display").html(name);

    tl.timeScale(1);
    tl.to($("#" + element.id + "_card"), 1, { opacity: 1 });
    tl.to($("#name_display"), 1, { opacity: 1 }, '-=1');
    tl.play();
    return tl;
}

function over() {
    //check if this item has an animation
    if (!this.animation) {
        //if not, create one
        this.animation = animateOver(this);
    } else {
        //or else play it
        this.animation.play().timeScale(1);
    }
}

function out() {
    //reverse animation 4 times normal speed
    this.animation.reverse().timeScale(4);
}

Answer 1

我发现我的问题出在哪里：弹出的图片（当我将鼠标放在座位上时）实际上仍然存在，不透明度为零，并且阻止了对 "overing" 的检测！

jQuery 鼠标悬停在 SVG 路径上 - 奇怪的错误

jQuery mouseover on SVG path - Strange bug

jquery

svg

mousehover