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

本文将指导您如何使用HTML、JS和CSS为网页上的图片添加动态边框效果,通过实例演示实现过程并提供相关代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

鼠标悬浮给图片加边框

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;}


 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值