可能是自己的判断不够好
<!DOCTYPE html PUBLIC >
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>L shen - 史诗塔防:风之魔咒</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style type="text/css">
div#page-wrap{
position:relative;
width:800px;
margin:0 auto 0 auto;
background-image:url('../images/bg-shade.png');
background-repeat:repeat;
}
h2{
font-weight: normal;
font-size: 24px;
margin-top: 0px;
}
h3{
font-weight: normal;
font-size: 27px;
margin-bottom: 10px;
}
a{
color: #c4d92e;
text-decoration: none;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
a:hover{
color: #fff;
text-decoration : underline;
}
p{
margin : 0;
padding-bottom : 6px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-indent : 2em;
}
ul, li {
list-style : none;
}
h1#head{
color:#C4D92E;
height:76px;
margin:130px auto 0;
position:relative;
width:800px;
}
#head a{
display:block;
font-size:70px;
font-weight:normal;
}
#head a span{
color: #fff;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#head a:hover span{
color: #c4d92e;
}
ul#nav{
background-image: url('../images/list_bg.png');
background-repeat: repeat-x;
height: 70px;
width: 960px;
list-style: none;
}
ul#nav li a{
display: block;
color: #c4d92e;
width: 146px;
float: left;
text-decoration: none;
font-size: 24px;
margin-top: 6px;
margin-left: -30px;
margin-right:30px;
}
ul#nav li a.home {
left: 0px;
top: 0px;
width: 114px;
}
ul#nav li a.about {
left: 0px;
top: 0px;
width: 145px;
}
ul#nav li a:hover , ul#nav li.current_list_item a{
color:white;
}
body {
background : url(../images/body_bg.jpg) no-repeat center top black;
width : 960px;
margin : 0 auto;
font : normal 24px/30px "宋体";
}
/* 主要内容 */
.content {
display :block;
margin : 0 auto;
width : 960px;
color : #666;
}
.content a {
color : #999;
font-size : 14px;
}
/* -主要内容- */
.m_con {
background : #333;
display : block;
float : left;
opacity : 0.8;
margin-right : 20px;
border : 1px solid #ccc;
border-radius : 5px;
width : 658px;
color : #aaa;
}
/* --介绍-- */
.intro {
padding : 10px 0 20px 0;
}
.intro img {
display : block;
float : left;
width : 72px;
margin-right : 20px;
padding: 0 20px 300px 20px;
border-right : 1px dotted #ccc;
}
.intro h2 {
margin : 0;
font-size : 24px;
color : #fff;
}
.intro span {
display : block;
float : left;
border-bottom : 1px solid #666;
width : 250px;
font-size : 14px;
}
.intro h3 {
display : block;
float : left;
width : 500px;
height : 24px;
font-size : 16px;
}
.intro p {
display : block;
float : left;
width : 500px;
line-height : 24px;
font-size : 14px;
text-align : justify;
}
a.link {
display : block;
float : left;
background : #949926;
margin-right : 20px;
border : 1px solid #aaa;
border-radius : 5px;
padding : 0px 10px;
line-height : 30px;
color : #fff;
}
.intro .help {
display : block;
float : left;
width : 300px;
color : #649926;
}
/* --切换显示-- */
div.oth_info {
clear : both;
display : block;
margin-bottom : 0px;
border-radius : 5px;
width : 100%;
font-size : 14px;
text-align : justify;
line-height : 24px;
}
.slide_sub {
display : block;
border-bottom : 1px solid #ccc;
width : 100%;
height : 31px;
}
.slide_sub span {
background : #999;
display : block;
float : left;
cursor : pointer;
margin : 0;
padding : 0 20px;
border : 1px solid #ccc;
border-radius : 5px;
width : 80px;
height : 30px;
line-height : 30px;
text-align : center;
font-size : 18px;
color : #fff;
}
.skill {
background : #666;
opacity : 0.8;
padding : 10px 20px;
color : #fff;
}
.img_area {
float : left;
}
/* ----浮动于选项卡的上面时添加的累---- */
span.slide_tit {
background : #a4a92e;
color : #fff;
}
/* --列表部分 */
.list {
background : #333;
display : block;
float : left;
opacity : 0.8;
padding : 10px 10px 0 10px;
border : 1px solid #ccc;
border-radius : 5px;
width : 218px;
}
.list_sub {
display : block;
float : right;
padding : 10px 0;
border-bottom : 1px dotted #ccc;
width : 218px;
color : #aaa;
font-size : 14px;
line-height : 24px;
}
.list_sub a {
display : block;
float : left;
margin : 0 10px 10px 0;
}
.list_sub h2 a {
display : block;
float : left;
width : 120px;
height : 16px;
line-height : 24px;
font-size : 16px;
color : #ddd;
}
.list_sub span {
display : block;
float : left;
width : 120px;
}
.list_link {
display : block;
width : 72px;
height : 72px;
text-indent : -9999em;
}
.list_one {
background : url(../images/hot/car.png);
}
.list_two {
background : url(../images/hot/fruit.png);
}
.list_thr {
background : url(../images/hot/cut.png);
}
.list_fou {
background : url(../images/hot/qqgame.png);
}
/* 页脚部分 */
div#footer {
display : block;
clear : both;
margin : 0 auto;
width : 960px;
height : 70px;
line-height : 70px;
text-align : center;
font-size : 16px;
color : #797979;
}
</style>
</head>
<body>
<h1 id="head"><img src="images/templatemo_logo.png" width="194" height="78" alt="1"></h1>
<div id="page-wrap">
<ul id="nav" >
<li class="current_list_item"><a href="index.html">卓游网</a></li>
<li><a class="about" href="#" >最近更新</a></li>
<li><a class="hot.html" href="#" >时下最热</a></li>
<li><a href="#">卓软</a></li>
<li><a href="game.html">卓游</a></li>
<li><a href="play.html">玩机</a></li>
</ul>
</div>
<div class="content">
<div class="m_con">
<div class="intro">
<img src="images/hot/car.png" alt="都市赛车">
<h2>都市赛车</h2>
<span>版本 : 2.5.5</span>
<span>评分 : 8.7</span>
<span>大小 : 17.66MB</span>
<span>更新 : 2013-3-14</span>
<span>语言 : 简体中文</span>
<span>收费 : 否</span>
<h3>简介 : </h3>
<p>游戏的画面和系统比较精致，音乐极富激情，久负盛名的赛车，类似像法拉利，兰博基尼，奥迪....高抛光HD图形让玩家看到每一个细节和赛道的动画，雪地、泥滩，灰尘多达12个场景左右，包括圣特罗佩，阿斯彭和拉斯维加斯的美丽地方。</p>
<p>游戏中有8种不同的赛车事件，包括漂流大赛，警匪大战，时间攻击，决斗模式，最后一人和逃逸，游戏还支持六名玩家的的蓝牙和线上竞赛。</p>
<a href="http://coop.android.d.cn/rm/10005/1/605/613/?http://duote.androidgame-store.com/android/new/game/5/605/pkg_2.apk?f=duote_1" class="link">立即下载</a>
<a href="#" class="help">如果您不会安装和使用请点击这里！</a>
</div>
<div class="oth_info">
<div class="slide_sub">
<span class="slide_tit" id="game_s">游戏技巧</span>
<span id="game_img">图片区域</span>
</div>
<div class="skill">
<p>在每个地方的比赛中，比赛种类都不尽相同，有纯粹比速度的竞速赛、有跑最后就算输的淘汰赛、有避免撞毁次数过多的压力赛、有纯粹比撞毁其它车辆次数的破坏赛、有以达到一定漂移分数的漂移赛、收集指定图标的收集赛等等等等，各种赛事大大提高了都市赛车的可玩性，但是要提醒大家的是，在你开始一场比赛之前一定要先认清楚这场比赛的胜利标准是什么，不要一味的追求跑得快，否则即使是第一名也是失败。</p>
<p>都市赛车的漂移玩法很简单，遇到弯道后拐弯的同时按下刹车，在车身基本转过弯道后往反方向猛打方向盘同时使用氮气加速。漂移的速度越快、距离越长，奖励的氮气也就越多。</p>
<p>在赛车行驶的过程中，一定要小心迎面驶来的车辆，相撞极易造成损毁，不仅浪费时间还会损失金钱。快速撞上护栏也极易撞毁，要尽量避免。</p>
<p>如果你喜欢也可以不用重力感应来玩，在游戏选项中设置为方向盘操控模式，这也是我最喜欢玩的模式。</p>
</div>
<div class="img_area" style="display : none;">
<ul>
<li><img src="images/game/qq_game.jpg" alt=""></li>
</ul>
</div>
</div>
</div>
<div class="list">
<div class="list_sub">
<a href="#" class="list_link list_one">都市赛车</a>
<h2><a href="#">都市赛车</a></h2>
<span>热度排名:第一名</span>
<span>网络评分:8.7</span>
</div>
<div class="list_sub">
<a href="#" class="list_link list_two">水果忍者</a>
<h2><a href="#">水果忍者</a></h2>
<span>热度排名:第二名</span>
<span>网络评分:8.2</span>
</div>
<div class="list_sub">
<a href="#" class="list_link list_thr">割绳子</a>
<h2><a href="#">割绳子</a></h2>
<span>热度排名:第三名</span>
<span>网络评分:8.1</span>
</div>
<div class="list_sub">
<a href="#" class="list_link list_fou">斗地主</a>
<h2><a href="#">斗地主</a></h2>
<span>热度排名:第四名</span>
<span>网络评分:7.8</span>
</div>
</div>
</div>
<div id="footer">Copyright 2004-2012 L.shen Corporation, All Rights Reserved</div>
<script type="text/javascript">
$('.slide_sub').delegate('span', 'hover', function(){
// 这里面有个顺序的问题，如果顺序乱掉的话，可能会出现没有经过第一个span的话第二个动画就不会实现...
if(!$(this).is('.slide_tit') || !$('#game_img').siblings().is(':animated') || !$('#game_s').is(':animated') ){
$(this).addClass('slide_tit').siblings().removeClass('slide_tit');
$('#game_s').delegate(this, 'hover', function(){
$('.skill').show().next().hide();
});
$('#game_img').delegate(this, 'hover', function(){
$('.img_area').show().prev().hide();
});
}
});
</script>
</body>
</html>
如果以后遇到这样的问题的时候，先检查判断的先后顺序
