鼠标悬停图片增加边框效果(适用多种尺寸图片且保持图片不位移)

2014-09-04阅读(4370)评论(2)牵着狗狗看MM

苏州实时公交查询

HTML

图片的宽高一定要定义
[html]<div class="con">
<img src="https://www.w3cways.com/wp-content/uploads/2014/08/jqueryapi.jpg" width="360px" height="110px">
<div class="border"></div>
</div>
[/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]

Demo

赞(0) 打赏
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » 鼠标悬停图片增加边框效果(适用多种尺寸图片且保持图片不位移)
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏