DIV CSS 佈局教程網

這篇文章主要介紹了鼠標懸停圖片產生邊框的效果實現,其中可以用CSS來定義邊框是虛線還是實線,需要的朋友可以參考下

Html

圖片的寬高一定要定義

XML/Html Code復制內容到剪貼板

1. <div class="con">
2. <img src="http://www.zjgsq.com/wp-content/uploads/2014/08/jqueryapi.jpg" width="360px" height="110px">
3. <div class="border"></div>
4. </div>

CSS

CSS Code復制內容到剪貼板

1. .con {
2. margin: 50px;
3. position: relative;
4. }
5. .border {
6. position: absolute;
7. top: 0;
8. left: 0;
9. rightright: 0;
10. bottombottom: 0;
11. }
12. .con:hover .border {
13. border: 5px solid #000;
14. }

虛線

在CSS裡面添加
CSS Code復制內容到剪貼板

1. <style>
2. td {border-bottom:1px dashed #000000;}
3. </style>

實線

在CSS裡面添加

CSS Code復制內容到剪貼板

1. <style>
2. td {border:1px solid black;}
3. </style>

JS

記得先引入jQuery文件

JavaScript Code復制內容到剪貼板

1. $(function () {
2. var w = $('img').width();
3. var h = $('img').height();
4. $('.con').width(w);//設置圖片外部包裹層的寬度，也可以直接在CSS裡設置
5. $('.con').height(h);//設置圖片外部包裹層的高度，也可以直接在CSS裡設置
6. $('.border').width(w - 10);//設置邊框層寬度，這裡要減去border寬度並乘以2
7. $('.border').height(h - 10);//設置邊框層高度，這裡要減去border寬度並乘以2
8. });

Demo