主要思路：就是给多一个层进行定位来实现，认真看看代码就会明白
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
*{margin:0;padding:0;}
ul,li{list-style:none;}
.box{1000px;margin:10px auto;}
.pic li{margin:5px;position:relative;display: inline-block;}
.pic li img{150px;height:100px}
.pic li i{142px;height:92px;border:4px solid #000; display: block;position: absolute;opacity:.3;background:#000;}
.pic .active i{display: block;opacity:1;border:4px solid orange;background:none;}
</style>
<body>
<div class="box">
<ul class="pic">
<li class="active"><i></i><img src="http://upload.gezila.com/data/20140219/91281392792816.jpg" alt=""></li>
<li><i></i><img src="http://upload.gezila.com/data/20140219/91281392792816.jpg" alt=""></li>
<li><i></i><img src="http://upload.gezila.com/data/20140219/91281392792816.jpg" alt=""></li>
</ul>
</div>
</body>
</html>
<script src="http://libs.baidu.com/jquery/1.8.0/jquery.js"></script>
<script>
$(function(){
$('.pic li').mouseover(function(){
$(this).addClass('active').siblings().removeClass();
});
});
</script>