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。将鼠标悬停在原始图像上时，工具提示的顶部和左侧位置已设置。当鼠标悬停在新图像上时，顶部和左侧位置不会改变。

光标位置的两个相同弹出div的实例

1 个答案: