如何实现mouseover出现如这论坛左边的头像出现详细信息框

Question

http://topic.csdn.net/u/20081018/12/16095d70-fb94-4315-a6ce-8f77d37e0f4a.html
看这里

Answer 1

就是ＤＩＶ＋ＣＳS实现的TIP效果

Answer 2

非常感谢2楼！原来不用Javascript也能实现这样的功能！看来我要多看DIV+CSS教程才行！

Answer 3

接点分
<style type="text/css">
.f{
cursor:pointer;
position:absolute;
width:357px;
height:194px;
padding:15px 0 0 50px;
background-image:url(http://static5.photo.sina.com.cn/middle/4ef69b3dg5785994300a4&000.jpg)
}
</style>
<script>
var oo = true
function create(){
if(oo==true){
oo=false
var div =document.createElement("div")
div.className="f"
div.id="div"
div.innerHTML="<a href='#'>大法师</a><br>山丘之王<br>血法师<br>怕拉丁"
document.body.appendChild(div)
document.getElementById("div").style.left=document.getElementById("text").offsetLeft+30
document.getElementById("div").style.top=document.getElementById("text").offsetTop
div.onmouseout=del
}}function del(e){
e=e||event;
var obj=e.relatedTarget||e.toElement;
var div =document.getElementById("div")
if(div.contains(obj))return;
document.body.removeChild(div)
oo=true
}</script>
<span  id="text" onmouseover="create()" style="cursor:pointer;" onMouseOut="del()" >人族</span><br>