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

 　　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