<!DOCTYPE html>
<html>
<head>
<title>纯CSS打造的图片开关灯效果_网页代码站(www.webdm.cn)</title>
<meta charset="utf-8" />
<style>
*{margin:0;padding:0;font-size:12px;list-style:none;border:0;-webkit-transition:opacity .2s ease-out;}
body{margin:30px;}
ul{background:url(http://www.webdm.cn/images/20130413/T1HH1oXexDXXXXXXXX-190-300.png) no-repeat left top;width:190px;height:300px; float:left;}
ul li{float:left;position:relative;width:95px;height:30px;}
ul li a{position:absolute;text-indent:-9999px;display:block;width:95px;height:30px;top:0;left:0;overflow:hidden;outline:none;}
.floorMain{float:left;background-color:#000;width:390px;}
.floorMain:hover a{opacity:0.7;filter:alpha(opacity='70');}
.floorMain a{float:left;line-height:0;}
.floorMain a:hover{opacity:1;filter:none;}
</style>
</head>
<body>
<div style="width:970px;">
<ul>
<li><a href="#">dior</a></li>
<li><a href="#">雅漾</a></li>
<li><a href="#">露得清</a></li>
<li><a href="#">施华蔻</a></li>
</ul>
<div class="floorMain">
<a href="#"><img src="http://www.webdm.cn/images/20130413/T11YWoXdhSXXXXXXXX-195-300.jpg" /></a>
<a href="#"><img src="http://www.webdm.cn/images/20130413/T17KanXa8cXXXXXXXX-195-150.jpg" /></a>
<a href="#"><img src="http://www.webdm.cn/images/20130413/T1sVCoXaNxXXXXXXXX-195-150.jpg" /></a>
</div>