*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
body{
background-color: black;
}
.wrapper{
margin: 100px auto 0;
width: 630px;
height: 394px;
background-color: #000;
padding: 10px 0 0 10px;
overflow: hidden;
border: 1px solid #fff;
}
.wrapper li{
float: left;
margin: 0 10px 10px 0;
}
.wrapper img{
display: block;
}
</style>
<script src="./jquery.min.js"></script>
</head>
<body>
<div class="wrapper">
<ul>
<li><a href="#"><img src="./images/01.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/02.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/03.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/04.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/05.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/06.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/07.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/08.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/09.jpg" alt=""></a></li>
</ul>
</div>
<script>
// $(function(){
// $('.wrapper li').hover(function(){
// $(this).siblings().stop().fadeTo(400,0.5);
// },function(){
// $(this).siblings().stop().fadeTo(400,1)
// })
// })
$(function(){
$('li').hover(function(){
$(this).siblings().stop().fadeTo(400,0.5)
},function(){
$(this).siblings().stop().fadeTo(400,1)
})
})
</script>