鼠标悬浮给图片加边框,适合大型展示

鼠标悬浮给图片加边框

html代码

 <div class="T-s-l fl">
        <a href="" class="a1">
            <img src="images/11.jpg" width="234" height="368" />
        </a><a href="" class="a2">
            <img src="images/11.jpg" />
        </a><a href="" class="a3">
            <img src="images/11.jpg" />
        </a>
    </div>

js代码

<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/jquery.insetborder.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
            //border
        $(".T-s-l a.a1").borderEffect();
        $(".a1").borderEffect();
        $(".T-s-l a.a2").borderEffect({ borderColor: '#e80484' });
        $(".T-s-l a.a3").borderEffect({ borderColor: '#7b7b7b', speed: 300, borderWidth: 10 });
     });
</script>

css代码

.T-s-l a{ background: url(images/download.png) no-repeat -10px 20px #fff; }
.T-s-l{ width: 952px; overflow: hidden; }
.T-s-l a{ float: left; width: 234px; height: 368px; margin: 0 19px 17px 0; font-size: 0; overflow: hidden;}