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

HTML

图片的宽高一定要定义

XML/HTML Code复制内容到剪贴板 <div class="con"> <img src="http://www.zjgsq.com/wp-content/uploads/2014/08/jqueryapi.jpg" width="360px" height="110px"> <div class="border"></div> </div>

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复制内容到剪贴板 <style> td {border:1px solid black;} </style>

记得先引入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

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