CSS图片选择器

HTML:

<div id=”wrap” >

<ul>
<li><a href=”#image1″ id=”2″><img src=”2.png” alt=”"/></a></li>
<li><a href=”#image2″ id=”3″><img src=”3.png” alt=”"/></a></li>
<li><a href=”#image3″ id=”4″><img src=”4.png” alt=”"/></a></li>
<li><a href=”#image4″ id=”5″><img src=”5.png” alt=”"/></a></li>
<li><a href=”#image5″ id=”6″><img src=”6.png” alt=”"/></a></li>
</ul>

<div id=”images”>
<div><a id=”image1″></a><img style=”width:500px;”src=”2.png” alt=”" title=”"/></div>
<div><a id=”image2″></a><img style=”width:500px;”src=”3.png” alt=”" title=”"/></div>
<div><a id=”image3″></a><img style=”width:500px;”src=”4.png” alt=”" title=”"/></div>
<div><a id=”image4″></a><img style=”width:500px;”src=”5.png” alt=”" title=”"/></div>
<div><a id=”image5″></a><img style=”width:500px;”src=”6.png” alt=”" title=”"/></div>

</div>

</div>

CSS:

*{
margin:o auto;
padding: 0;}

body {
margin:0;
padding:0;
background-color: #111;
color:#888;}

a{
text-decoration:none;
color:#660066;}

ul{
list-style:none;
float:left;
width:125px;
margin:0 auto;
border-right:5px solid black;

}

ul li{

border-right:10px solid black;
}

ul li a img{
filter:alpha(opacity=40);
width:110px;
opacity:0.4;}

}

ul li a:hover img{
filter:alpha(opacity=100);
opacity:1.0;
}

#images {
width:500px;

overflow:hidden;
float:left;
border-right:10px solid black;}

#wrap{
width:700px;

}

所用的图片为500*300