我如何重新定位悬停在悬停的卡片
我有一张带有卡片的地图，显示何时将热点悬停。非常感谢在这个论坛上的帮助。我唯一的问题是在浏览器右边缘附近的热点右侧的卡片显示。 它是由CSS和JavaScript设置的，后者什至不是新手。
我尝试了其他CSS职位，但无效。我假设JavaScript中的某些内容需要更改？
这是网页。超过35或36的悬停说明了问题。
这是CSS：
#card {
position: relative;
left: 30px;
width: 300px;
height: 150px;
display: none;
border: none;
background: #ffd;
pointer-events: none;
}
这是JavaScript：
let paths = document.querySelectorAll("path");
paths.forEach((p) => {
p.addEventListener("mouseleave", (evt) => {
card.style.display = "none";
});
p.addEventListener("mousemove", (evt) => {
let pos = oMousePos(svg, evt);
let text = p.dataset.text;
card.style.display = "block";
card.style.top = pos.y + "px";
card.style.left = pos.x + "px";
card.innerHTML = text;
});
});
function oMousePos(element, evt) {
let ClientRect = element.getBoundingClientRect();
return {
//objeto
x: Math.round(evt.clientX - ClientRect.left),
y: Math.round(evt.clientY - ClientRect.top)
};
}
I have a map with cards that show when a hotspot is hovered over. Works great thanks to help on this forum. The only problem I am having is the card shows to the right of the hotspot therefor gets cut off when near the right edge of the browser.
It is set up with css and javascript, the latter of which I am not even a novice.
I tried other css positions but didnt work. I'm assuming something in the javascript needs to be changed??
This is the webpage. Hovering over number 35 or 36 illustrates the problem.
This is the CSS:
#card {
position: relative;
left: 30px;
width: 300px;
height: 150px;
display: none;
border: none;
background: #ffd;
pointer-events: none;
}
This is the Javascript:
let paths = document.querySelectorAll("path");
paths.forEach((p) => {
p.addEventListener("mouseleave", (evt) => {
card.style.display = "none";
});
p.addEventListener("mousemove", (evt) => {
let pos = oMousePos(svg, evt);
let text = p.dataset.text;
card.style.display = "block";
card.style.top = pos.y + "px";
card.style.left = pos.x + "px";
card.innerHTML = text;
});
});
function oMousePos(element, evt) {
let ClientRect = element.getBoundingClientRect();
return {
//objeto
x: Math.round(evt.clientX - ClientRect.left),
y: Math.round(evt.clientY - ClientRect.top)
};
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您需要检查当前光标X/Y位置 +卡/弹出宽度是否超过您的SVG边界：
如果光标位置靠近右边（
evt.clientx + cardWidth），则可以添加负面偏移300（弹出窗口的宽度）。垂直溢出的相同过程。简化的示例
You need to check if the current cursor x/y position + card/popup width exceeds your svg's boundaries:
If the cursor position is close to the right (
evt.clientX + cardWidth) you can add a negative offset of 300 (your popup's width). Same procedure for vertical overflow.Simplified example