jQueryのマウスオーバー - 奇妙なバグ

Question

こんばんは、

私はオーケストラのためのサイトをコーディングしていると私は写真で組織図を実装しています。私の考えは、オーケストラのすべての座席の "地図"を持ち、あなたがマウスで座席の1つを移動すると、この人に関する情報が飛び出します。

<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 S

は（順番に）に対応して、次の画像の4,3,2,1席：

私はjQueryの少しとSVGの微調整のおかげで動作するようになりました

私の問題は、マウスオーバーは、（私が席に触れ正確にいつ画像がポップアップ）席1及び2に完璧に動作しますが、私はノーを持って全体の3のシートと4

をカバーしていないということですこの問題を引き起こす原因は何かクロム、Firefoxとエッジ上のNS ...

私の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

私が見つかりました：（私は席の上に私のマウスを置いたとき）にポップアップ画像は、まだ実際にはなかったですそこには不透明度が0であり、 "誇張"の検出をブロックしていました！