鼠标悬停叠加div仅在循环的第一个结果时保持定位

Question

如果您将鼠标悬停在图像按钮上，我有一个覆盖div的脚本。

这适用于一个实例，但如果结果多于一个（在mysql循环中），则覆盖框保留最顶层的结果。我怎样才能跟随并跳过列出的每个结果而不仅仅是第一个结果？如果将鼠标悬停在列表中的每个按钮上，它会弹出，但弹出窗口的位置不会向下移动。

我确信这与位置有关：绝对与相对等等。但是当我改变它们时，脚本不再起作用了。不确定是否有替代此叠加功能？

最终结果是我有一个客户要查看的结果列表。每个列表都有按钮，用户可以通过鼠标悬停来查看注释。

//循环中的div ...

<div style="float:left; position: relative;" onmouseover="callMouseOver()" onmouseout="callMouseOut()">
<img style="padding:0 12px 0 12px;" src="/images/llm/button-account-notes.png">
    <div id="child" class="areas_served_container shadow">
    pop up content
    </div>
</div>

//页脚中的脚本

<script language="javascript">
function callMouseOver(){
document.getElementById("child").style.display = "inline";
}

function callMouseOut(){    
document.getElementById("child").style.display = "none";    
}
</script>

//覆盖

的div的样式表

.areas_served_container {
display: none; position: absolute; 
top:44px; left:94px; 
z-index:999px; 
width:350px; padding:20px; 
}

Answer 1

您不能拥有多个具有相同id的元素。它必须是独一无二的。然后你必须为你的函数添加参数。但你应该使用jQuery而不是发明一个轮子。