下面是修改后的脚本,修复了出现重复图片的问题,添加了对 fixedImgContainer 的删除和对应 ToolTip 的消失延时的处理,同时也更新了 tooltip 的位置计算:

let selectedLabel = null;
let currentTooltip = null;
let tooltipTimer = null;
let fixedImgContainer = 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");
    const imgSrc = label.getAttribute("data-img");
    if (imgSrc) {
      const img = new Image();
      img.src = imgSrc;
      img.onload = function () {
        // If image width or height is greater than 150px, show it in fixed position
        if (img.width > 150 || img.height > 150) {
          if (!fixedImgContainer) {
            fixedImgContainer = document.createElement("div");
            fixedImgContainer.classList.add("fixed-img-container");
            document.body.appendChild(fixedImgContainer);
          }
          const fixedImg = new Image();
          fixedImg.src = imgSrc;
          fixedImgContainer.innerHTML = '';
          fixedImgContainer.appendChild(fixedImg);
        } else {
          tooltip.appendChild(document.createElement("br"));
          tooltip.appendChild(img);
        }
      }
      img.onerror = function () {
        console.log("Error: Failed to load image '" + imgSrc + "'");
      };
    }
    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 + 10;

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

    if (top + tooltipHeight > wrapperRect.top + wrapperRect.height) {
      // tooltip 超出下方边界
      top = wrapperRect.top + wrapperRect.height - tooltipHeight;
    }

    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 = "";
        }
      }, 500);

      // Remove fixed image container if it exists
      if (fixedImgContainer) {
        fixedImgContainer.innerHTML = '';
        document.body.removeChild(fixedImgContainer);
        fixedImgContainer = null;
      }
    });

    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 = "";
        }
      }, 200);

      // Remove fixed image container if it exists
      if (fixedImgContainer) {
        fixedImgContainer.innerHTML = '';
        document.body.removeChild(fixedImgContainer);
        fixedImgContainer = null;
      }
    }
  });
});
``
现在这个脚本运行后有问题:有时候在同一个label上快速移动鼠标后 fixedImgContainer 里会出现相同的重复的图片;还有就是fixedImgContainer 应该是和对应 ToolTip 一样的按照500和200的延时来消失删除的;再就是有fixedImgContainer 的话tooltip里应该是 tooltipstyleleft = mouseX + 10 + px;

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

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