可以将判断图片是否存在的逻辑放在图片加载完成后的回调函数中,然后根据图片是否存在来决定是否要减去图片高度。修改后的代码如下:

let selectedLabel = null; let currentTooltip = null; let tooltipTimer = null;

labels.forEach((label) => { label.addEventListener("mouseover", (e) => { if (currentTooltip) { document.querySelector(".category-options-wrapper").removeChild(currentTooltip); clearTimeout(tooltipTimer); }

    const tooltip = document.createElement("div");
    tooltip.classList.add("tooltip");
    tooltip.innerHTML = label.getAttribute("data-title");
    tooltip.style.position = "absolute";
    const imgSrc = label.getAttribute("data-img");
    if (imgSrc) {
        const img = new Image();
        img.src = imgSrc;
        img.onload = function() {
            tooltip.appendChild(document.createElement("br"));
            tooltip.appendChild(img);

            if (img.width > 150 || img.height > 150) {
                tooltip.style.position = "fixed";
                tooltip.style.right = "10px";
                tooltip.style.top = "10px";
                tooltip.style.minWidth = "300px";
            } else {
                tooltip.style.top = e.pageY - 30 + "px";
            }

            if (tooltip.querySelector("img")) {
                tooltip.style.top = parseInt(tooltip.style.top) - tooltip.querySelector("img").height + "px";
            }
        };
        img.onerror = function() {
            console.log("Error: Failed to load image '" + imgSrc + "'");
            tooltip.style.top = e.pageY - 30 + "px";
        };
    }

    tooltip.style.maxWidth = "300px";
    document.querySelector(".category-options-wrapper").appendChild(tooltip);

    const tooltipWidth = tooltip.offsetWidth;
    const tooltipHeight = tooltip.offsetHeight;
    const mouseX = e.clientX;
    const mouseY = e.clientY;
    const wrapperRect = document.querySelector(".category-options-wrapper").getBoundingClientRect();

    let left = mouseX - wrapperRect.left + 10;
    let top = mouseY - wrapperRect.top - tooltipHeight -10;

    if (!imgSrc || !tooltip.querySelector("img")) {
        left = e.pageX + 10;
        top = e.pageY - 30;
    } else if (left + tooltipWidth > wrapperRect.left + wrapperRect.width) {
        // tooltip 超出右侧边界
        left = wrapperRect.left + wrapperRect.width - tooltipWidth;
    }

    tooltip.style.left = left + "px";
    tooltip.style.top = top + "px";

    tooltip.addEventListener("mousemove", () => {
        clearTimeout(tooltipTimer);
    });

    tooltip.addEventListener("mouseout", () => {
        tooltipTimer = setTimeout(() => {
            document.querySelector(".category-options-wrapper").removeChild(tooltip);
            currentTooltip = null;
            // 如果该 label 元素是当前选中的元素,则不还原其背景颜色
            if (label == selectedLabel) {
                label.style.backgroundColor = "";
            }
        }, 5000);
    });

    currentTooltip = tooltip;
    // 如果当前已有选中的 label 元素,则将其背景颜色还原
    if (selectedLabel && label !== selectedLabel) {
        selectedLabel.style.backgroundColor = "";
    }
    // 将当前 label 元素设置为选中,并将其背景颜色设置为 '#40b40d'
    selectedLabel = label;
    selectedLabel.style.backgroundColor = "rgba(64, 180, 13, 0.6)";
});


label.addEventListener("mouseleave", () => {
    if (currentTooltip) {
        tooltipTimer = setTimeout(() => {
            document.querySelector(".category-options-wrapper").removeChild(currentTooltip);
            currentTooltip = null;
            // 如果该 label 元素是当前选中的元素,则不还原其背景颜色
            if (label == selectedLabel) {
                label.style.backgroundColor = "";
            }
        }, 2000);
    }
});

})

现在这代码有个地方会闪烁:imgonerror = function consolelogError Failed to load image + imgSrc + ; 	tooltipstyletop = epageY - 30 + px; 跟这里不协调:if imgSrc 	t

原文地址: http://www.cveoy.top/t/topic/fyLz 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录