<div class="strongfunc" id="FuncDiv">
<ul>
<li class="funcfirst">
<div class="funcimg">
<a href="#"><img src="images/ico_mailfunc1.png" alt="35EQ" /></a>
</div>
<span class="functxt"><a href="#">35EQ</a></span>
<div class="floatinfo" style="left:-32px"><p><span>企业级即时聊天工具</span></p></div>
</li>
<li>
<div class="funcimg">
<a href="#"><img src="images/ico_mailfunc2.png" alt="多线接入" /></a>
</div>
<span class="functxt"><a href="#">多线接入</a></span>
<div class="floatinfo" style="left:-28px"><p><span>彻底解决南北互通问题</span></p></div>
</li>
<li>
<div class="funcimg">
<a href="#"><img src="images/ico_mailfunc3.png" alt="全球转发" /></a>
</div>
<span class="functxt"><a href="#">全球转发</a></span>
<div class="floatinfo" style="left:-38px"><p><span>多IP发送规避IP地址被封</span></p></div>
</li>
<li>
<div class="funcimg">
<a href="#"><img src="images/ico_mailfunc4.png" alt="手机邮箱" /></a>
</div>
<span class="functxt"><a href="#">手机邮箱</a></span>
<div class="floatinfo" style="left:-14px"><p><span>邮箱随着手机走</span></p></div>
</li>
<li>
<div class="funcimg">
<a href="#"><img src="images/ico_mailfunc5.png" alt="短信提醒" /></a>
</div>
<span class="functxt"><a href="#">短信提醒</a></span>
<div class="floatinfo" style="left:-38px"><p><span>让您随时随地把握商机！</span></p></div>
</li>
<li>
<div class="funcimg">
<a href="#"><img src="images/ico_mailfunc6.png" alt="邮件监控" /></a>
</div>
<span class="functxt"><a href="#">邮件监控</a></span>
<div class="floatinfo" style="left:-20px"><p><span>Boss的第三只眼睛</span></p></div>
</li>
<li>
<div class="funcimg">
<a href="#"><img src="images/ico_mailfunc7.png" alt="自摧毁邮件" /></a>
</div>
<span class="functxt"><a href="#">自摧毁邮件</a></span>
<div class="floatinfo" style="left:-6px"><p><span>发送隐形邮件</span></p></div>
</li>
</ul>
</div>

<style type="text/css">
body{ font:12px Arial, Helvetica, sans-serif;}
a{ color:#5d5d5d; text-decoration:none;}
.strongfunc{ position:relative; zoom:1;}
.strongfunc ul{ margin:40px 0 0 80px; zoom:1; list-style:none;}
.strongfunc li{ position:relative; float:left; width:70px; height:75px; padding-left:9px; background:url(images/ico_funcpoint.png) no-repeat left 27px; text-align:center;}
.strongfunc .funcfirst{ padding:0; background:none;}
.funcimg{ position:relative;}
.funcimg a{ display:table-cell; vertical-align:middle; width:70px; height:60px; line-height:60px; *display:block; *font-size:45px;}
.funcimg a img{ vertical-align:middle; border:0;}
.functxt{ white-space:nowrap;}
.floatinfo,.floatinfo p,.floatinfo p span{ background:url(images/floathint_bg.png) no-repeat; line-height:23px;}
.floatinfo{ display:none; position:absolute; bottom:60px; white-space:nowrap; background-position:0 -7px;}
.floatinfo p{ margin:0; padding:0; margin-left:12px; padding-right:12px; background-position:right -7px;}
.floatinfo p span{ display:block; background-position:center 22px; height:29px;}
</style>

$(document).ready(function(){
//缓存外层容器及动画列表项的jQuery包装集
var funcdiv = $("#FuncDiv"),actAreas = funcdiv.find("li");
 
//给动画列表项增加鼠标移入事件
actAreas.hover(function(){
showFloat($(this));
},function(){});
 
function showFloat(actArea){//定义显示提示信息动画的方法
var floatdiv = actArea.find("div.floatinfo");  //获取当前提示信息
var curfloat = $.data(funcdiv,"curfloat");  //获取上一次鼠标移入时弹出的提示信息
if(curfloat){
if(curfloat[0] == floatdiv[0]) return;
curfloat.stop()
.animate({opacity:0,bottom:"60px"},200);  //如果已经有信息显示并且不是当前鼠标处的这一条，就用动画使它渐隐
}
$.data(funcdiv,"curfloat",floatdiv);  //标记当前提示信息
floatdiv.stop()
.css({opacity:0,display:"block"})
.animate({opacity:1,bottom:"70px"},200);  //用动画使当前鼠标处的信息渐显
}
 
showFloat(actAreas.eq(0));  //页面加载完成后默认显示第一项信息
});