效果图:
关键点:
1、 show_card 这个 css。它必须是左浮动。这样隐藏的层在相对定位设置为left:0,top:0的时候才会在父div的最左上角出现。
2、头像用img标签,并设置他的z-index。设置的值要大于隐藏的详细信息的div的z-index。
代码如下:
<!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>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript" >
</script>
<style type="text/css">
*{
margin:0;
padding:0;
}
.msgcard{
cursor:pointer;
float:left;
width:150px;
border:1px solid #999999;
border-right:none;
height:300px;
}
.show_card{
float:left;
font-size:12px;
}
.hide_card{
display:none;
position:relative;
left:-1px;
top:-1px;
border:1px solid #CCCCCC;
z-index:100;
font-size:12px;
background: white;
height:200px;
width:400px;
padding-top:20px;
}
.hide_card div{
margin-left:130px;
margin-top:5px;
}
.content_msg{
font-size:13px;
background:#EEF7FC;
float:left;
height:300px;
width:550px;
border:1px solid #999999;
}
.row{
width:900px;
margin-left:auto;
margin-right:auto;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".msgcard").hover(function(){
$(this).children(".hide_card").show();
},function(){
$(this).children(".hide_card").hide();
});
})
</script>
</head>
<body>
<div style="position:absolute; left:100px; top:200px">
<div class="row">
<div class="msgcard">
<div class="show_card">
<img src="noavatar_middle.gif" width="120px" height="120px" style="margin-left:5px; margin-top:5px; position:relative; z-index:101" />
</div>
<div class="hide_card">
<div>昵称:lxl631</div>
<div>身份:举人</div>
<div>金币:900000</div>
</div>
</div>
<div class="content_msg">
文章文章
</div>
</div>
</div>
</body>
</html>