圖片邊框變換CSSHover狀態(tài)效果一例_DIV+CSS實例
教程Tag：暫無Tag,歡迎添加,賺取U幣!
我們可能會經(jīng)常用到此效果，在傳統(tǒng)的做法中，這一效果的實現(xiàn)是比較困難或繁瑣的，現(xiàn)在通過CSS實現(xiàn)鼠標移至圖片，邊框發(fā)生變換的效果，是非常輕易的。我們看下面的代碼。
CSS代碼：
示例代碼 [www.hl5o.cn]
p#outer {
margin:0 auto;
width:202px;
}
#outer a {
margin:0px;
display:block;
position: relative;
border:1px solid #069;
}
#outer a:hover {border:1px dashed #c00;}
#outer img {display:block;border:none;background:#069;}
margin:0 auto;
width:202px;
}
#outer a {
margin:0px;
display:block;
position: relative;
border:1px solid #069;
}
#outer a:hover {border:1px dashed #c00;}
#outer img {display:block;border:none;background:#069;}
XHTML代碼：
示例代碼 [www.hl5o.cn]
<p id="outer"><a href="#">
<img src="http://p1.mb5u.com/divcss/logo3.gif" alt="www.hl5o.cn" width="200" height="90" /></a>
</p>
<img src="http://p1.mb5u.com/divcss/logo3.gif" alt="www.hl5o.cn" width="200" height="90" /></a>
</p>
查看運行效果：
代碼調試框 [www.hl5o.cn]
[ 可先修改部分代碼 再運行查看效果 ]
相關DIV+CSS實例：
- 相關鏈接：
- 教程說明：
DIV+CSS實例-圖片邊框變換CSSHover狀態(tài)效果一例
。