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

GodTyler

于 2018-09-29 10:22:34 发布

阅读量696

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js 文章标签：鼠标滑入鼠标划出

本文链接：https://blog.youkuaiyun.com/GodMutianle/article/details/82893566

<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=