日期:2014-05-16  浏览次数:20402 次

关于一个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/javascri