divcss鼠標懸停圖片產生邊框的效果實現的方法

大家知道divcss鼠標懸停圖片產生邊框的效果實現嗎?下面我們就給大家詳細介紹一下吧!我們積累了一些經驗，在此拿出來與大家分享下，請大家互相指正。

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三角箭頭應用實踐介紹