jq 鼠标滑入划出效果+多条数据滑入划出效果+隔行换底色

<script type="text/javascript">
	$(document).ready(function(){
		//隔行换底色
		$("#contl1>li:even").addClass("odd");
		$("#contl2>li:even").addClass("odd");
   							
   		//鼠标滑入 某元素 显示某个元素
   		$(".chapter").mouseover(function(){
   			$(this).next('.mou').show();  //多个元素
            //$(".mou").css("display","block");  //单个元素
		});
							
		//鼠标滑出 某元素 隐藏某个元素
		$(".chapter").mouseout(function(){
			$(this).next('.mou').hide();   //多个  
  			//$(".mou").css("display","none");   单个
		});
							
});
						
</script>

<{foreach $chapter as $key=>$v}>
	<li class="chapter">
		<a  href="" class="contents-tab" target="_blank">
			<span><{$key = $key + 1}><{$key}></span><{$v.name}>
		</a>
	</li>
						
	    <div  class="mou" style="text-align: center; line-height: 45px; background-color: #DFE5E6; display: none;">

	    <{foreach $v.son as $va}>

	        <div style="height: 46px;margin-right: 100px;" ><{$va.name}></div>
	    <{/foreach}>
	</div>
						
<{/foreach}>

效果图