jquery图文列表鼠标经过滑动切换效果出错

这是原版的，鼠标hover它就显示出图片列，鼠标经过下一个，它上一个会收起。这是我仿制的，不知道哪出问题了，不收起，而且刚出来时也不显示第一条栏目。大神帮看看，谢谢htt... 这是原版的，鼠标hover它就显示出图片列，鼠标经过下一个，它上一个会收起。
这是我仿制的，不知道哪出问题了，不收起，而且刚出来时也不显示第一条栏目。大神帮看看，谢谢
http://pan.baidu.com/s/1bnGVNgb 展开





 我来答

2个回答

#热议# 发烧为什么不能用酒精擦身体来退烧？

匿名用户
2015-02-15

展开全部

<!DOCTYPE HTML>
<html>
<head>
<meta charset=UTF-8 />
<title>333</title>
<style>
* {
	margin: 0;
	padding: 0;
}

ul,li {
	list-style-type: none;
}

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

.clearfix {
	*zoom: 1;
}

a {
	text-decoration: none;
	color: #666;
	outline: none;
	font-size: 13px;
}

#appshow {
	width: 250px;
	margin-top: 33px;
	margin-right: auto;
	margin-bottom: 33px;
	margin-left: auto;
	border: 1px solid #ddd;
}

#appshow .tit {
	padding-left: 25px;
	background-color: #f5f5f5;
	font-size: 14px;
	line-height: 41px;
	height: 41px;
	font-weight: bold;
}

.applist li {
	height: 39px;
	line-height: 39px;
	border-top: 1px dotted #d8d8d8;
	overflow: hidden;
	zoom: 1;
}

.app-show-title {
	padding-left: 15px;
	line-height: 39px;
	zoom: 1;
}

.index-down {
	margin: 0px;
	margin-top: 7px;
	font-weight: normal;
	background-color: #FF4E00;
	display: block;
	text-align: center;
	font-size: 12px;
	margin: 0px auto;
	text-indent: 0px;
	width: 60px;
	height: 25px;
	line-height: 25px;
	color: #fff;
	text-decoration: none;
	background-position: -228px -47px;
	background-color: #FF4E00;
}

.app-show-block {
	margin: 0px 0px 0px 12px;
	padding-left: 65px;
	height: 60px;
	padding: 2px 0px 0px 80px;
	position: relative;
	height: 78px;
	text-align: left;
}

.app-show-block img {
	display: block;
	height: 55px;
	width: 55px;
	border: 2px solid #333;
	border-radius: 8px;
}

.app-show-block .pic {
	position: absolute;
	top: 0px;
	left: 0px;
}

li.current a {
	font-weight: bold;
}

li.current {
	color: #ff4e00;
}

li.current {
	font-weight: normal;
}

.cls {
	zoom: 1;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
	$ (function ()
    {
	    $ ("ul.applist li").mouseenter (function ()
	    {
		    $ (this).stop ().animate (
		    {
			    height : "100px"
		    }).addClass ("current");
	    }).mouseleave (function ()
	    {
		    $ (this).stop ().animate (
		    {
			    height : "39px"
		    }).removeClass ("current");
	    });
    });
</script>
</head>
<body>
	<div id="appshow">
		<div class="tit">游戏排行</div>
		<ul class="applist cls">
			<li>
				<div class="app-show-title">
					<a href="http://97zzw.com/">玛尔扎哈推荐视频</a>
				</div>
				<div class="app-show-block">
					<a href="http://97zzw.com/" class="pic"><img src="k1.jpg" alt="玛尔扎哈推荐视频"> </a> <a href="###" class="index-down">安&nbsp;装</a>
				</div></li>
		</ul>
		<ul class="applist">
			<li>
				<div class="app-show-title">
					<a href="http://97zzw.com/">节奏大师</a>
				</div>
				<div class="app-show-block">
					<a href="http://97zzw.com/" class="pic"><img src="k2.jpg" alt="节奏大师"> </a> <a href="###" class="index-down">安&nbsp;装</a>
				</div></li>
		</ul>
		<ul class="applist">
			<li>
				<div class="app-show-title">
					<a href="http://97zzw.com/">神庙逃亡2</a>
				</div>
				<div class="app-show-block">
					<a href="http://97zzw.com/" class="pic"><img src="k3.jpg" alt="神庙逃亡2"> </a> <a href="###" class="index-down">安&nbsp;装</a>
				</div></li>
		</ul>
		<ul class="applist">
			<li>
				<div class="app-show-title">
					<a href="http://97zzw.com/">地铁跑酷</a>
				</div>
				<div class="app-show-block">
					<a href="http://97zzw.com/" class="pic"><img src="k1.jpg" alt="地铁跑酷"> </a> <a href="###" class="index-down">安&nbsp;装</a>
				</div></li>
		</ul>
		<ul class="applist">
			<li>
				<div class="app-show-title">
					<a href="http://97zzw.com/">天天爱消除</a>
				</div>
				<div class="app-show-block">
					<a href="http://97zzw.com/" class="pic"><img src="k5.jpg" alt="天天爱消除"> </a> <a href="###" class="index-down">安&nbsp;装</a>
				</div></li>
		</ul>
		<ul class="applist">
			<li>
				<div class="app-show-title">
					<a href="http://97zzw.com/">天天酷跑</a>
				</div>
				<div class="app-show-block">
					<a href="http://97zzw.com/" class="pic"><img src="k6.jpg" alt="天天酷跑"> </a> <a href="###" class="index-down">安&nbsp;装</a>
				</div></li>
		</ul>
		<ul class="applist">
			<li>
				<div class="app-show-title">
					<a href="http://97zzw.com/">克格莫推荐视频</a>
				</div>
				<div class="app-show-block">
					<a href="http://97zzw.com/" class="pic"><img src="k7.jpg" alt="克格莫推荐视频"> </a> <a href="###" class="index-down">安&nbsp;装</a>
				</div></li>
		</ul>
		<ul class="applist">
			<li>
				<div class="app-show-title">
					<a href="http://97zzw.com/">卡萨丁推荐视频</a>
				</div>
				<div class="app-show-block">
					<a href="http://97zzw.com/" class="pic"><img src="k8.jpg" alt="卡萨丁推荐视频"> </a> <a href="###" class="index-down">安&nbsp;装</a>
				</div></li>
		</ul>
		<ul class="applist">
			<li>
				<div class="app-show-title">
					<a href="http://97zzw.com/">黛安娜推荐视频</a>
				</div>
				<div class="app-show-block">
					<a href="http://97zzw.com/" class="pic"><img src="k4.jpg" alt="黛安娜推荐视频"> </a> <a href="###" class="index-down">安&nbsp;装</a>
				</div></li>
		</ul>
	</div>
</body>
</html>

追问

，原版的开始时第一条是显示的，，然后鼠标离开之后是不会收缩起来的，这个怎么弄，谢谢

追答

$ ("ul.applist li:lt(0)")

已赞过 已踩过<

评论收起

百度网友5973b4c
2015-02-15 · 超过20用户采纳过TA的回答

知道答主

回答量：39

采纳率：0%

帮助的人：39.5万

我也去答题访问个人页

关注

展开全部

能贴源代码吗？公司里面不能访问百度盘

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

jquery图文列表鼠标经过滑动切换效果出错

为你推荐：