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

 HTML

图片的宽高一定要定义

<div class="con">

<img src="http://www.zjgsq.com/wp-contenthttps://file.a5xiazai.com/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>

 JS

记得先引入jQuery文件

$(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

});