大家知道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選擇器怎麼使用呢