カーソル位置にある同じポップアップdivの2つのインスタンス

Question

ウェブページ上にはイメージがあります。私がそれをマウスオーバーすると、隠されたdivがカーソル位置にその画像に関する情報をポップアップ表示します。そのイメージをクリックすると、別のdivに別のイメージが作成されます。マウスオーバーすると、新しい画像も同じdivポップアップを共有します。

私はjqueryを使用しています。

$("#" + abys).on("mouseover", function(e){ 
    $("#" + abys + "_tooltip").css({ 
     left: e.pageX, 
     top: e.pageY 
    }).show(); 
}); 

$("#" + abys).on("mouseout", function(e){ 
    $("#" + abys + "_tooltip").hide(); 
}); 

新しい画像は、クリックすると純粋なjavascriptが使用されます。

var itemDiv = document.getElementById("items_div"); 

var newImg = document.createElement("img"); 
    newImg.src = "/items_img/" + abys + ".png"; 
    newImg.id = abys + "_slot"; 
    itemDiv.appendChild(newImg); 
    appendNum++; 
    console.log(appendNum); 

    newImg.onclick = function(){ 
     newImg.parentNode.removeChild(newImg); 
     appendNum--; 
     console.log(appendNum); 
    } 

    newImg.onmouseover = function(e){ 
     abysTooltip.style.display = "block"; 
     abysTooltip.style.top = e.pageX; 
     abysTooltip.style.left = e.pageY; 
    } 

ポップアップdivのCSS。

.item_tooltip_div { 
    border:1px solid; 
    padding:20px; 
    width:400px; 
    display:none; 
    position:absolute; 
    z-index:10; 
    background-color:rgb(0,0,0); 
    pointer-events:none; 
} 

私はに実行している問題は、私は新しいイメージをマウスオーバーすると、ツールチップは、元の画像の場所ではなく、私のマウスカーソルの位置に表示されることです。

Answer 1

両方のインスタンスでjqueryを使用して解決しました。

何らかの理由で、jquery .css（）がJavaScriptの.styleをブロックしていました。元の画像にカーソルを合わせると、ツールヒントの上端と左端の位置が既に設定されています。新しい画像の上にマウスを移動すると、上と左の位置は変化しませんでした。