CSS 实现内边框效果
主要思路：就是给多一个层进行定位来实现，认真看看代码就会明白
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
*{margin:0;padding:0;}
ul,li{list-style:none;}
.box{width:1000px;margin:10px auto;}
.pic li{margin:5px;position:relative;display: inline-block;}
.pic li img{width:150px;height:100px}
.pic li i{width: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" ></li>
<li><i></i><img src="http://upload.gezila.com/data/20140219/91281392792816.jpg" ></li>
<li><i></i><img src="http://upload.gezila.com/data/20140219/91281392792816.jpg" ></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>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
