Question

我有一个固定宽度的父div，隐藏了溢出。父div有几个图像，我使用自定义Javascript滚动。对于每个图像，我有一个工具提示，我想在鼠标悬停图像时显示。工具提示很大，当鼠标悬停在图像上时会被剪切，因为父div已隐藏溢出。什么是这个问题的最佳解决方案。我一直在四处寻找，并没有找到一个可行的解决方案。

非常感谢任何帮助。感谢

Answer 1

我建议你工具提示元素将是BODY的子元素，因此它们不会被剪裁。为了在相对于图像的位置显示工具提示，您必须知道图像相对于BODY的位置。这是我使用的方法：

function getPosition(element)
{
var position = {x:-1, y:-1};

// no element //
if (element === null) return position;

// getting offset parent
var offsetParentNode = document.body; 

// calculating position //
position.x = 0;
position.y = 0;
var _parent = element;
while (_parent !== offsetParentNode && _parent !== document.body && _parent !== null)
{
    position.x += _parent.offsetLeft;   
    position.x -= _parent.scrollLeft;
    position.y += _parent.offsetTop;    
    position.y -= _parent.scrollTop;
    _parent = _parent.offsetParent;
}

if (offsetParentNode !== document.body && (_parent === document.body || _parent === null))
{
    position.x = -1;
    position.y = -1;
}

return position;
}

子元素（图像的工具提示）被剪切在具有固定宽度和溢出隐藏的父div中

1 个答案: