主页 / 问题 / 1242823
Accepted
Monkey Mutant
Asked:2022-02-11 21:40:05 +0000 UTC2022-02-11 21:40:05 +0000 UTC

如何在悬停时出现的光标下放置一个块？

  • 772

有一个 SVG 地图，悬停时会出现一个 div 块，其中包含有关 mousemove 事件的信息

但是根据风水不可能居中..有一些我不知道如何摆脱的静态单位

我的尝试

片段的长度不允许，因此我插入链接：https ://codepen.io/topicstarter/pen/PobbbZN

const svg = document.getElementById("svg-map");
const info = document.querySelector(".info");
const child = svg.querySelectorAll("path");

svg.onmousemove = function(e) {
  e = window.event;

  child.forEach(function(el) {
    info.style.opacity = 1;
    info.innerHTML = e.target.getAttribute("title");
  });

  info.style.left = e.clientX - 200 + "px";
  info.style.top = e.clientY + 20 + "px";
};

svg.onmouseout = function() {
  info.style.opacity = "0";
};

无法得到这个结果

在此处输入图像描述

javascript

2 个回答

  1. Best Answer

    您需要根据 pageX / Y 定位，因为它会在滚动时中断。info 放在 svg-outer 之前，因为父级 (svg-outer) 是相对定位的，子级分别相对于父级而不是文档的左上边缘进行缩进 (left, top)

    https://codepen.io/dratovannyi/pen/KKNNaQj

    const svg = document.getElementById("svg-map");
const info = document.querySelector(".info");
const child = svg.querySelectorAll("path");

svg.onmousemove = function (e) {
  e = window.event;

  child.forEach(function (el) {
    info.style.opacity = 1;
    info.innerHTML = e.target.getAttribute("title");
  });

  info.style.left = e.pageX - 100 + "px";
  info.style.top = e.pageY + 30 + "px";
};

svg.onmouseout = function () {
  info.style.opacity = "0";
};
    • 2

  2. 对于风水：

    let info = document.querySelector(".info");
let svg = document.querySelector("#svg-map");

/***/
// Текстовое значение / видимость определяется только один раз, на входе-выходе
// Пусть mousemove меняет только координаты.

let path = svg.querySelectorAll("path");

for (let i = 0; i < path.length; i++) {
  path[i].addEventListener("mouseenter", show_info);
  path[i].addEventListener("mouseleave", hide_info);
}

function show_info() {
  info.textContent = this.getAttribute("title");
  info.style.display = "block";
}

function hide_info() {
  info.style.display = "none";
}

/***/
const INFO_WID = info.offsetWidth;
const X_MAX = window.innerWidth - INFO_WID - 20;
const X_MIN = 10;

svg.addEventListener("mousemove", function(e) {
  const Y_MAX = window.innerHeight - info.offsetHeight - 5;
  // Определяется тут, т.к. высота info может меняться (многострочный текст)

  let x = Math.max(X_MIN, Math.min(X_MAX, e.pageX - INFO_WID / 2)); // (*1)
  let y = e.pageY + (e.pageY + 20 < Y_MAX ? (20) : (-info.offsetHeight - 20)); // (*2)

  info.style.left = x + "px";
  info.style.top = y + "px";
});
    path {
  fill: #f80;
}

.info {
  position: absolute;
  text-align: center;
  width: 200px;
  background: white;
  box-shadow: 1px 1px 5px #000000;
}
    <svg id="svg-map" width="100%" height="180">
  <path title="111" d="M   0,10   0,180  80,180  80,10"></path>
  <path title="222" d="M 100,10 100,180 180,180 180,10"></path>
  <path title="333" d="M 200,10 200,180 280,180 280,10"></path>
  <path title="444" d="M 300,10 300,180 380,180 380,10"></path>
  <path title="555" d="M 400,10 400,180 480,180 480,10"></path>
  <path title="666" d="M 500,10 500,180 580,180 580,10"></path>
  <path title="777" d="M 600,10 600,180 680,180 680,10"></path>
</svg>

<div class="info"></div>

    (*1) Math.max(X_MIN, Math.min(X_MAX, e.pageX - INFO_WID / 2)); : X_MIN, X_MAX - 将工具提示保持在屏幕之外的限制器。X_MAX = window.innerWidth - INFO_WID - 20- 当涉及到ширина_экрана - своя_ширина.

    (*2) e.pageY + (e.pageY + 20 < Y_MAX ? (20) : (-info.offsetHeight - 20)); - 有点不同，如果工具提示没有超出屏幕，则y需要添加到光标的 - 坐标，或者减去它以使其位于光标上方。+20px-20 - высоту_подсказки

    • 2

相关问题