鼠标悬停图片产生边框的效果实现

 　　HTML

　　图片的宽高一定要定义

　　XML/HTML Code复制内容到剪贴板

　　CSS

　　CSS Code复制内容到剪贴板

　　.con {

　　margin: 50px;

　　position: relative;

　　}

　　.border {

　　position: absolute;

　　top: 0;

　　left: 0;

　　rightright: 0;

　　bottombottom: 0;

　　}

　　.con:hover .border {

　　border: 5px solid #000;

　　}

　　虚线

　　在css里面添加

　　CSS Code复制内容到剪贴板

　　实线

　　在css里面添加

　　CSS Code复制内容到剪贴板

　　JS

　　记得先引入jQuery文件

　　JavaScript Code复制内容到剪贴板

　　$(function () {

　　var w = $('img').width();

　　var h = $('img').height();

　　$('.con').width(w);//设置图片外部包裹层的宽度，也可以直接在CSS里设置

　　$('.con').height(h);//设置图片外部包裹层的高度，也可以直接在CSS里设置

　　$('.border').width(w - 10);//设置边框层宽度，这里要减去border宽度并乘以2

　　$('.border').height(h - 10);//设置边框层高度，这里要减去border宽度并乘以2

　　});

　　Demo

收藏此文 赞一下！() 打赏本站

如本文对您有帮助，就请建站学习网抽根烟吧！

支付宝打赏
微信打赏