<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.wrap{
width: 660px;
height: 420px;
background: #000000;
margin: 0 auto;
padding: 1px;
}
li{
float: left;
list-style: none;
margin: 2px;
}
</style>
<script src="../js/jquery-1.11.1.js"></script>
<script>
$(document).ready(function(){
$("li").mouseenter(function(){
$(this).css("opacity",1).siblings().css("opacity",0.6);
})
//给div添加离开事件
$("div").mouseleave(function(){
//
$(this).children("ul").eq(0).children("li").css("opacity",1);
});
})
</script>
</head>
<body>
<div class="wrap">
<ul>
<li>
<img src="images/01.jpg" />
</li>
<li>
<img src="images/02.jpg" />
</li>
<li>
<img src="images/03.jpg" />
</li>
<li>
<img src="images/04.jpg" />
</li>
<li>
<img src="images/05.jpg" />
</li>
<li>
<img src="images/06.jpg" />
</li>
</ul>
</div>
</body>
</html>
***************************************************************无图片版
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.d{
width: 520px;
margin-left: 252px;
height: 420px;
background: #f89;
padding: 1px;
}
div{
float: left;
background: #fff;
width: 100px;
height: 100px;
list-style: none;
margin: 2px;
}
</style>
<script type="text/javascript" src="js/js/jquery-1.11.1.min.js" ></script>
<script>
$(document).ready(function(){
$("div").mouseenter(function(){
$(this).css("background-color","red").siblings().css("background-color","chartreuse");
});
//给div添加离开事件
$(".d").mouseleave(function(){
//
$(this).children("div").css("background-color","#FFFFFF");
$(".d").css("background-color","#F89");
});
});
</script>
</head>
<body>
<div class="d" >
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
</div>
</body>
</html>
5300
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
