html5怎样做两个边框且位移,鼠标悬停图片增加边框效果（适用多种尺寸图片且保持图片不位移）...

HTML

图片的宽高一定要定义

[html]

[/html]

CSS

[css].con {

margin: 50px;

position: relative;

}

.border {

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

}

.con:hover .border {

border: 5px solid #000;

}

[/css]

JS

记得先引入jQuery文件

[js]$(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

});

[/js]