想实现为每一条遍历出来的数据，绑定鼠标触发事件。实现鼠标移动后，弹出div层显示详细资料,鼠标移开后 div 层自动隐藏。但不知为何，我的代码只有第一条数据能弹出正确的层。移动到第二条数据及后面的数据，也是弹出第一条数据的层。请指教，谢谢！！
window.onload = function () {
            var allDiv = document.getElementsByTagName("div");
            for (var i = 0; i < allDiv.length; i++) {
                if (allDiv[i].thisDiv == "thisDiv") {
                    allDiv[i].onmouseover = showDiv; 
                    allDiv[i].onmouseout = hideD; 
                }
            }
        }

        function showDiv() {
            document.getElementById("hideDiv").style.display = "block";
        }
        function hideD() {
            document.getElementById("hideDiv").style.display = "none";
        }
下面的是html代码：
@foreach (var item in Model) {
        
        <div id="source" thisDiv="thisDiv">@Html.DisplayFor(modelItem => item.UserName)</div>

        //这是隐藏层
        <div id="hideDiv" style="display:none; background-color:#f5f5f5;">@item.UserName 用户详细信息...</div>
  
    }