鼠标悬停头像显示 详细信息层js控制层的显示位置目标效果 跟新浪 微博 鼠标悬停头像 显示出资料卡效果一样
鼠标悬停头像显示 详细信息层js控制层的显示位置
目标效果 跟新浪 微博 鼠标悬停头像 显示出资料卡效果一样
- JScript code
$(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(); }) })
前台代码
- C# code
<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>目前效果是 把 其他 元素都顶开了
求指导 谢谢...
[解决办法]
鼠标移上去之后新建一个div，建立位置之后设置它的zIndex比其他的都大 行不行？
[解决办法]
顶了 这个我不是很懂
[解决办法]
- HTML code
<!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>