zoukankan      html  css  js  c++  java
  • 鼠标悬浮给图片加边框,适合大型展示

    鼠标悬浮给图片加边框

    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{  952px; overflow: hidden; }
    .T-s-l a{ float: left;  234px; height: 368px; margin: 0 19px 17px 0; font-size: 0; overflow: hidden;}


     

     

  • 相关阅读:
    nginx启动失败
    Windows下载安装docker详细步骤
    Consul
    Idea导入多个maven项目到同一目录下
    使用V-chart时踩过的一些坑
    java集合超详解
    HashMap
    curl和wget的区别和使用
    SourceTree3.2.6版本跳过注册办法
    单点登录
  • 原文地址:https://www.cnblogs.com/lcchuguo/p/4483228.html
Copyright © 2011-2022 走看看