<!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>CSS+JS实现浪微博头像tips效果</title>
<style>
a,span,p{ line-height:18px; font-size:12px; margin:0; padding:0; color:#0CC; text-decoration:none;}
.*{ width:50px; height:50px; position:relative; padding:2px; border:1px solid #ccc; cursor:pointer; margin:170px 0 0 20px;; font-size:12px; float:left; }
.b,.detail*{ width:300px; height:128px; z-index:10; left:0; top:-162px; padding:12px;border:2px solid #eee; border-bottom:0 none; background:#fff; }
.b{ top:60px;}
.b dt,.detail* dt{ float:left; *:inline; }
.b dd,.detail* dd{ padding-left:20px; line-height:14px;}
.b .links,.detail* .links{ background:#eee; line-height:38px; margin:0 -14px; padding:0 15px; height:38px;}
.b .i,.detail* .i{ padding: 0 5px; color:#ccc}
.b .bt,.detail* .bt{ float:right; border:1px solid #CCC; width:100px; margin: 7px; height:21px; line-height:21px; padding:0 8px; }
.* .arrow, .ar{background: url(“/imagesforcode/201304/new_index_bg.png“) no-repeat scroll -223px -71px transparent; height: 8px;left: 13px;top: -8px;width: 16px; z-index:12; }
.* .ar{ background-position:-142px -71px; top:54px;}
.* .arrow, .* .ar, .b,.detail*{position:absolute;overflow: hidde;*:none}
</style>
</head>
<body>
<div class=“*“ id=“*“>
<img src=“/images/s1.jpg“ width=“50“ height=“50“ />
<div class=“detail*“ id=“detail*“>
<dl>
<dt><img src=“/images/s1.jpg“ width=“50“ height=“50“ /></dt>
<dd>
<a href=“#“>XXX</a>
<span>（设置备注）</span>
<p>广东，深圳</p>
<p>关注粉丝微薄</p>
</dd>
</dl>
<dl>
<dt>简介：</dt>
<dd>来自五湖四海的朋友，欢迎你们</dd>
</dl>
<div class=“links“>
<a href=“#“>求关注</a>
<span class=“i“>|</span>
<span><a href=“#“>设置分组</a></span>
<div class=“bt“>
<a href=““>已关注</a>
<span class=“i“>|</span>
<span><a href=“#“>取消</a></span>
</div>
</div>
</div>
<div class=“arrow“ id=“arrow“></div>
</div>
<div class=“*“ style=“ margin:50px 0 0 0;“ id=“*1“>
<img src=“/images/s2.jpg“ width=“50“ height=“50“ />
<div class=“detail*“ id=“detail*1“>
<dl>
<dt><img src=“/images/s2.jpg“ width=“50“ height=“50“ /></dt>
<dd>
<a href=“#“>XXX</a>
<span>（设置备注）</span>
<p>广东，深圳</p>
<p>关注粉丝微薄</p>
</dd>
</dl>
<dl>
<dt>简介：</dt>
<dd>来自五湖四海的朋友，欢迎你们</dd>
</dl>
<div class=“links“>
<a href=“#“>求关注</a>
<span class=“i“>|</span>
<span><a href=“#“>设置分组</a></span>
<div class=“bt“>
<a href=““>已关注</a>
<span class=“i“>|</span>
<span><a href=“#“>取消</a></span>
</div>
</div>
</div>
<div class=“arrow“ id=“arrow1“></div>
</div>
<div class=“*“ id=“*2“>
<img src=“/images/s3.jpg“ width=“50“ height=“50“ />
<div class=“detail*“ id=“detail*2“>
<dl>
<dt><img src=“/images/s3.jpg“ width=“50“ height=“50“ /></dt>
<dd>
<a href=“#“>XXX</a>
<span>（设置备注）</span>
<p>广东，深圳</p>
<p>关注粉丝微薄</p>
</dd>
</dl>
<dl>
<dt>简介：</dt>
<dd>来自五湖四海的朋友，欢迎你们</dd>
</dl>
<div class=“links“>
<a href=“#“>求关注</a>
<span class=“i“>|</span>
<span><a href=“#“>设置分组</a></span>
<div class=“bt“>
<a href=““>已关注</a>
<span class=“i“>|</span>
<span><a href=“#“>取消</a></span>
</div>
</div>
</div>
<div class=“arrow“ id=“arrow2“></div>
</div>
<script>
var x=window.x||{};
x.personal*=function(*,detail*,arrow){
var o*=document.getElementById(*);
var odetail*=document.getElementById(deta
