jquery鼠标悬停列表菜单样式代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery鼠标悬停列表菜单样式代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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>jquery鼠标悬停列表菜单样式代码</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){

	$('.lm_con li').each(function(){
		var thisSpan = $(this)
		thisSpan.hover(function(){
			thisSpan.find('span').show().stop(true).animate({opacity: 1.0,color:'#0a80e9'}, 200);
			thisSpan.find('a').stop(true).animate({color:'#0a80e9'}, 300);
		},
		function () {
			thisSpan.find('span').hide().stop(true).animate({opacity: 0,color:'#666666'}, 200);
			thisSpan.find('a').stop(true).animate({color:'#666666'}, 300);
		});
	});
	
	$('.lm_con li a').hover(function(){
		$(this).find('i').stop(true,true).animate({'width':'26px'},300);
		$(this).find('div').stop(true,true).animate({'width':'138px','padding-left':'3px'},300);
	},function(){
		$(this).find('i').stop(true,true).animate({'width':'0px'},300);
		$(this).find('div').stop(true,true).animate({'padding-left':'0px'},300);
	})	
	
});
</script>
<div class="main_m_l">
	<div class="lm_tit">关于我们</div>
	<div class="lm_con">
		<ul>
			<li><span class="leftDiv"></span><a href="#"><i></i><div>公司介绍</div></a></li>
			<li><span class="leftDiv"></span><a href="#"><i></i><div>企业文化</div></a></li>
			<li><span class="leftDiv"></span><a href="#"><i></i><div>企业资质</div></a></li>
			<li><span class="leftDiv"></span><a href="#"><i></i><div>服务承诺</div></a></li>
			<li><span class="leftDiv"></span><a href="#"><i></i><div>服务流程</div></a></li>
			<li><span class="leftDiv"></span><a href="#"><i></i><div>发展历程</div></a></li>
			<li><span class="leftDiv"></span><a href="#"><i></i><div>合作伙伴</div></a></li>
		</ul>
	</div>   
</div>
</body>
</html>

CSS代码(style.css):

@charset "utf-8";/*以上为通用选择器*/
body{font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:normal;color:#666666;margin:0px;padding:0px;background:#fff;}
p,from,h1,h2,h3,h4,h5,h6,{margin:0px;padding:0px;}
ul,ol{margin:0px;padding:0px;list-style-type:none;}
img{border:none;}
a{color:#333333;text-decoration:none;}
a:hover{color:#666666;text-decoration:underline;}
.clear{clear:both;}
/* main_m_l */
.main_m_l{width:202px;margin:0 auto;}
.lm_tit{font-family:"微软雅黑";font-size:20px;color:#000;background:url(../images/lm_tit.gif) no-repeat left center;text-indent:30px;padding:12px 0;}
.lm_con{font-family:"微软雅黑";padding:5px 7px 0px 7px;}
.lm_con li{line-height:38px;height:38px;overflow:hidden;font-size:14px;background:url(../images/nyzbdhdjbg.gif);}
.lm_con li a{display:block;position:relative;padding-left:20px;text-decoration:none;cursor:pointer;}
.lm_con li a i{position:absolute;right:0;top:0;height:38px;line-height:38px;width:0px;overflow:hidden;background:url(../images/jt2.png) no-repeat left center;}
.lm_con li a:hover i{background:url(../images/jt1.png) no-repeat left center;}
.leftDiv{background:url(../images/nyzbdhbg.gif);position:absolute;width:188px;height:38px;display:none;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}

附件:下载该文件资源,减少时间成本(增值服务)