大家知道divcss鼠标悬停图片产生边框的效果实现方法吗?下面我们就给大家详细介绍一下吧!我们积累了一些经验，在此拿出来与大家分享下，请大家互相指正。

HTML

图片的宽高一定要定义

XML/HTML Code复制内容到剪贴板

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复制内容到剪贴板

JS

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

相信大家已经学会divcss鼠标悬停图片产生边框的效果实现方法了吧!感谢大家对我们网站的支持!

相关推荐：

CSS选择器怎么使用呢