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

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

效果图