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