日期:2014-05-16 浏览次数:20402 次
<!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>
请问一下这个代码有问题吗 我是要用Jquery来实现一个效果 就是在一个DIV里面鼠标在其不用的位置显示不同的图片,请指教!谢谢 我是JQ新手 不甚感谢
.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;
}
<!DOCTYPE html>
<html>
<head>
<style>
a{display:none;}
</style>
<script type="text/javascri