HTML
图片的宽高一定要定义
XML/HTML Code复制内容到剪贴板 <divclass="con"> <imgsrc="http://www.zjgsq.com/wp-content/uploads/2014/08/jqueryapi.jpg"width="360px"height="110px"> <divclass="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:5pxsolid#000; }
虚线
在css里面添加
CSS Code复制内容到剪贴板
<style> td{border-bottom:1pxdashed#000000;} </style>
实线
在css里面添加
CSS Code复制内容到剪贴板 <style> td{border:1pxsolidblack;} </style>
JS
记得先引入jQuery文件
JavaScript Code复制内容到剪贴板 $(function(){ varw=$('img').width(); varh=$('img').height(); $('.con').width(w);//设置图片外部包裹层的宽度，也可以直接在CSS里设置 $('.con').height(h);//设置图片外部包裹层的高度，也可以直接在CSS里设置 $('.border').width(w-10);//设置边框层宽度，这里要减去border宽度并乘以2 $('.border').height(h-10);//设置边框层高度，这里要减去border宽度并乘以2 });
Demo
【鼠标悬停图片产生边框的效果实现】相关文章：