如何实现像Csdn当鼠标移到用户名时显示一个方框(包括头像和个人帐户信息)?

Question

如何实现像Csdn当鼠标移到用户名时显示一个方框(包括头像和个人帐户信息)? 

Answer 1

像CSDN这样，先生成好信息表格，然后不显示，当鼠标移到头像那里时，通过JS把隐藏的信息显示出来
下面是CSDN的<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD class=left id=UserCard_left><A href="http://hi.csdn.net/lsd123/" 
target=_blank><IMG class=face alt="" 
src="http://profile.csdn.net/lsd123/picture/2.jpg"></A><BR><A 
href="http://hi.csdn.net/lsd123/" target=_blank>个人空间</A><BR><A 
href="http://webim.csdn.net/AddFriends/lsd123.ashx" target=_blank><IMG 
class=addFriend alt="add friend" 
src="http://topic.csdn.net/u/ui/scripts/System/_resource/blank.gif"></A><BR><A 
href="http://webim.csdn.net/Messages/lsd123.ashx" target=_blank><IMG 
class=sendIMMsg alt="send message" 
src="http://topic.csdn.net/u/ui/scripts/System/_resource/blank.gif"></A><BR><A 
href="http://blog.csdn.net/lsd123/" target=_blank><IMG class=goBlog alt=blog 
src="http://topic.csdn.net/u/ui/scripts/System/_resource/blank.gif"></A><BR><A 
href=""></A></TD>
<TD class=right id=UserCard_right><SPAN>帐号：</SPAN><A 
href="http://hi.csdn.net/lsd123/" target=_blank><VAR>lsd123</VAR></A><BR><IMG 
style="DISPLAY: none" src="http://counter.csdn.net/pv.aspx?id=241" 
border=0><SPAN>昵称：</SPAN><A href="http://hi.csdn.net/lsd123/" target=_blank><VAR 
id=UserCard_nickname></VAR></A><BR><SPAN>最新帖子：</SPAN><BR><SPAN 
id=UserCard_topiclist>
<OL>
<LI><A title="如何实现像Csdn当鼠标移到用户名时显示一个方框(包括头像和个人帐户信息)? &nbsp; " 
href="http://topic.csdn.net/u/20090105/20/ed69732f-f17e-4a12-a56c-99b1e8236828.html" 
target=_blank>如何实现像Csdn当鼠…</A></LI>
<LI><A title=如何实现像Csdn当鼠标移到用户名时显示一个方框(包括头像和个人帐户信息)? 
href="http://topic.csdn.net/u/20090105/19/b4fd0a8a-6049-4c1e-b34a-a8e7f9ecbb38.html" 
target=_blank>如何实现像Csdn当鼠…</A></LI>
<LI><A title=innerText、outerText的区别 
href="http://topic.csdn.net/u/20090105/13/57404fa2-3288-414e-83e6-5a24bc506890.html" 
target=_blank>innerText、outerTe…</A></LI></OL></SPAN><SPAN 
style="MARGIN-LEFT: 90px"><A 
href="http://forum.csdn.net/PointForum/Forum/UserTopicList.aspx?user=lsd123">更多帖子...</A></SPAN></TD></TR></TBODY></TABLE>

Answer 2

<style type="text/css">
.f{
cursor:pointer;
position:absolute;
width:357px;
height:194px;
background-image:url(http://static5.photo.sina.com.cn/middle/4ef69b3dg5785994300a4&000.jpg)
}
.k{
padding:15px 0 0 50px;
}
</style>
<script>
var oo = true
var vv=["大法师</a><br>山丘之王<br>血法师<br>怕拉丁","剑圣<br>先知<br>牛头人<br>小yy","死亡骑士<br>巫妖<br>恐惧魔王<br>小强","恶魔猎手<br>丛林守护者<br>守望者<br>老虎女继嗣"]
function create(obj,num){
if(oo==true){
oo=false
var div =document.createElement("div")
div.className="f"
div.id="div"
document.body.appendChild(div);
var nerdiv = document.createElement("div")
nerdiv.id="nerdiv"
nerdiv.className="k"
nerdiv.innerHTML=vv[num]
document.getElementById("div").appendChild(nerdiv)
var left=obj.offsetLeft
var top=obj.offsetTop
var width=obj.offsetWidth
while (obj=obj.offsetParent) {
left += obj.offsetLeft;
top += obj.offsetTop;
};
document.getElementById("div").style.left=left+width
document.getElementById("div").style.top=top
div.onmouseout=del
}}function del(e){
var e = e||window.event;
var obj=e.relatedTarget||e.toElement;
var div =document.getElementById("div")
var nerdiv =document.getElementById("nerdiv")
if(div==obj||nerdiv==obj)return;
document.body.removeChild(document.getElementById("div"))
oo=true
}</script>
<div id="kkk">
<span  id="text" onmouseover="create(this,0)" style="cursor:pointer;" onmouseout="del(event)">人族</span><br><br><br><br><br><br><br><br><br><br><br><br>
<span  id="text" onmouseover="create(this,1)" style="cursor:pointer;" onmouseout="del(event)" >兽族</span><br><br><br><br><br><br><br><br><br><br><br><br>
<span  id="text" onmouseover="create(this,2)" style="cursor:pointer;" onmouseout="del(event)" >不死族</span><br><br><br><br><br><br><br><br><br><br><br>
<span  id="text" onmouseover="create(this,3)" style="cursor:pointer;" onmouseout="del(event)" >精灵族</span><br><br><br><br><br><br><br><br><br><br><br>
</div>

Answer 3

onmouseover触发显示一个DIV 并用AJAX把内容显示出来
或直接显示事先隐藏的DIV

Answer 4

两总方法
1:开始把数据读出来，把他放在一个层上面 也就是一个div div的z-index属性高一点，具体的让美工搞一下，或者网上找一下 用mouseover 和mouseout来控制这个层的隐藏和展现
隐藏是 style.display='none' 显示是style.display='block' 。jquery里有相应的hide()和show()方法。
2： 用mouseover 和mouseout来控制，通过ajax到后台读数据，个人建议用第一种。如何一个页面的数据量比较大，可以使用第2个

Answer 5

wushuai123456  你好 我想问下 你的内容应该怎么替换 麻烦给讲解下 我换成带a标签的或是表格就不能用了   但是都是静态文字也没多少用了  谢谢了