鼠标悬停头像显示 详细信息层js控制层的显示位置

目标效果 跟新浪 微博 鼠标悬停头像 显示出资料卡效果一样
   $(function () {
        //2.绑定鼠标经过事件
        $("a[userid]").mouseover(function () {
            $.ajax({
                url: "../handler/UserInfo.ashx?userid=" + $(this).attr("userid"),
                type: "post",
                timeout: 30000,
                dataType: "json",
                success: function (data) {
                    if (data != null) {
                        var tipinfo = "<!--vcard_bg--><div class=\"vcard_bg\">" +
                        "<!--vcard_box--><div class=\"vcard_box\">" +
                        "<!--v_header--><div class=\"v_header\">" +
                        "<!--userinfo--><div class=\"v_user_headimg\">" +
                       "<a href=\"#\"><img src=\"" + data.params.selfpicture + "\" width=\"50\" height=\"50\" border=\"0\" /></a></div>" +
                        "<div class=\"v_user_headername\">" +
"<p><a href=\"#\">" + data.params.nickname + "</a>" +
data.params.validated == true ?
"<img style=\"cursor:pointer; margin:5px 0 0 3px;\" title=\"已认证\" src=\"images/vip.gif\">" : "" +
                "</p><p><em>" + data.params.city + "</em><em>海淀区</em></p>" +
                "<div class=\"v_user_atten\">" +
              "<ul>" +
                "<li class=\"li_dif\">" +
                  "<a href=\"#\">我关注的</a>" +
                   "<span class=\"v_user_num\">" + data.params.concerningcount + "</span>" +
                "</li>" +
                "<li>|</li>" +
                "<li>" +
                 " <a href=\"#\">关注我的</a>" +
                   "<span class=\"v_user_num\">" + data.params.concernedcount + "</span>" +
                "</li>" +
                "<li>|</li>" +
                "<li>" +
                 " <a href=\"#\">我的微博</a>" +
                   "<span class=\"v_user_num\">" + data.params.blogcount + "</span>" +
                "</li>" +
             " </ul>" +
            "</div>" +
            "<!--v_header end-->" +
             "</div>" +
          "<!--userinfo end-->" +
          "<div class=\"cl\"></div>" +
          "<!--v_info-->" +
          "<div class=\"v_info\"><p>知名女作家</p></div>" +
          "<!--v_info end-->" +
          "<div class=\"cl\"></div>" +
          "</div>" +
        "<div class=\"cl\"></div>" +
          "</div>" +
          "<!--vcard_box end-->" +
          "<div class=\"vcard_jt\"></div>" +
          "</div>" +
          "<!--vcard_bg end-->";
                        $("#tip").html(tipinfo);
                        $("#tip").show();
                    }
                    //data 为返回出来的json对象
                    //将用户信息写到div中
                    //设置div的位置在图片上方 
                }
            })
        })
        //3.绑定鼠标离开事件
        $("a[userid]").mouseout(function () {
            $(".vcard_bg").hide();
        })
    })
前台代码 <asp:Repeater ID="RepeaterBlogList" runat="server" OnItemDataBound="RepeaterBlogList_ItemDataBound">
        <ItemTemplate>
            <li class="li-blog-list" id="li_<%#Eval("ApplicationID").ToString().Replace('-','_').ToLower() %>">
                <div class="head_pic">
                    <asp:HyperLink ID="HyperLinkImage" runat="server">
                    <div id="tip" style="display: none;"></div>  //目前是放到这个div中
                        <a userid="<%#Eval("blogsender").ToString()%>">  //这个是 鼠标悬停 触发  js事件
                            <asp:Image ID="ImageHead" runat="server" /></a>
                    </asp:HyperLink>
                </div>
  </ItemTemplate>
    </asp:Repeater>
目前效果是   把 其他 元素都顶开了  求指导   谢谢...

解决方案 »

  1.   

    鼠标移上去之后新建一个div，建立位置之后设置它的zIndex比其他的都大 行不行？
      

  2.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <script type="text/javascript">
            function MM_over(mmObj) {
                var mSubObj = mmObj.getElementsByTagName("div")[0];
                mSubObj.style.display = "block";
            }
            function MM_out(mmObj) {
                var mSubObj = mmObj.getElementsByTagName("div")[0];
                mSubObj.style.display = "none";
            }    </script>
    </head>
    <body>
        <div onmouseover="MM_over(this)" onmouseout="MM_out(this)" style="width: 100px; margin: 150px;
            position: relative;">
            sdfsdf
            <div class="test" style="width: 100px; height: 30px; 
                display: none; background-color: #FEFEE9;">
                我是信息
            </div>
        </div>
    </body>
    </html>
      

  3.   

    关键点是，弹出的div要能有超级连接并可以点击。