鼠标悬停图片产生边框的效果实现
• 经验
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复制内容到剪贴板
<style> td {border-bottom:1px dashed #000000;} </style> 实线
在css里面添加
CSS Code复制内容到剪贴板 <style> td {border:1px solid black;} </style> JS
记得先引入jQuery文件
JavaScript Code复制内容到剪贴板 $(function () { var w = $(img).width(); var h = $(img).height(); $(.con).width(w); $(.con).height(h); $(.border).width(w - 10); $(.border).height(h - 10); }); Demo
![鼠标悬停图片产生边框的效果实现](https://www.w4m.cn/uploadfile/www.w4m.cn/12/261323.jpg)