Mouseover overlay 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而不是發明輪子。