关于一个jquery的有关问题请多多指教

关于一个jquery的问题请多多指教



<!DOCTYPE html>

<html>

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 

 <link href="css.css" type="text/css" rel="stylesheet">

 <script type="text/javascript">

   $(function(){

	   //$("ul li:nth-child(1)").mouseout(function(){

		 //  $(this).parents(".ju").find("#a1").css("display","none");

	//   });

	   	  $("ul li:nth-child(2)").mouseover(function(){

		   $(this).parents(".ju").find("#a1").css("display","none");

		    $(this).parents(".ju").find(".a2").css("display","block");

		   

	  });

	     $("ul li:nth-child(2)").mouseout(function(){

		   $(this).parents(".ju").find(".a2").css("display","none");

	   	   $("ul li:nth-child(3)").mouseover(function(){

		   $(this).parents(".ju").find(".a3").css("display","block");

	   });

	     $("ul li:nth-child(3)").mouseout(function(){

		   $(this).parents(".ju").find(".a3").css("display","none");

	   });

	   	   $("ul li:nth-child(4)").mouseover(function(){

		   $(this).parents(".ju").find(".a4").css("display","block");

	   });

	     $("ul li:nth-child(4)").mouseout(function(){

		   $(this).parents(".ju").find(".a4").css("display","none");

	   });


   });

 </script>

  </head>

  <body>

  <div class="ju">

  <a id="a1"><img src="1.jpg"></a>

  <a class="a2"><img src="2.jpg"></a>

  <a class="a3"><img src="3.jpg"></a>

  <a class="a4"><img src="4.jpg"></a>

  <ul class="ha">

  <!--<li></li>-->

  <li></li>

  <li></li>

  <li></li>

  </ul>

  </div>

  </body>

 </html>



.body{

	margin:0px auto;

	padding:0px;

}

.ju{

	height:126px;

	width:160px;

	margin:0px auto;

	padding:0px;

	overflow:hidden;

	border:#000 1px solid;

}

.ju ul{

	width:160px;

	list-style-type:none;

	margin:0px;

	padding:0px;

}

.ju ul li{

	width:40px;

	height:126px;

	float:left;

	margin:0px;

	padding:0px;

}

.ju a{

	display:none;

	z-index:999;

}

#a1{

	display:block;

}

请问一下这个代码有问题吗我是要用Jquery来实现一个效果就是在一个DIV里面鼠标在其不用的位置显示不同的图片，请指教！谢谢我是JQ新手不甚感谢

------解决方案--------------------
事件最好放在ul上



<!DOCTYPE html>

<html>

<head>

<style>

a{display:none;}

</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

关于一个jquery的有关问题 请多多指教

相关推荐

关于一个jquery的有关问题请多多指教